Html 如何在网站中嵌入 PDF 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4082672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to embed a PDF file in a web site?
提问by JWM
I simply want to embed a PDF file in a web site.
我只是想在网站中嵌入一个 PDF 文件。
The best solution I've found is Google Docs Viewer (http://docs.google.com/viewer), but it does not work for IE and obviously that is not going to work for me.
我找到的最好的解决方案是 Google Docs Viewer ( http://docs.google.com/viewer)，但它不适用于 IE，显然这对我不起作用。
Anyone have a clean, easy solution to this?
任何人都有一个干净，简单的解决方案？
Update: I should add that one of the benefits of embedding the PDF file the Google viewer way is that as the PDF file I link to gets updated (and it could without notice to me), my site would automatically be holding the same PDF file (provided the full pathname doesn't change, which it does not). For this reason converting the file to an image is not preferred while.
更新：我应该补充一点，以 Google 查看器方式嵌入 PDF 文件的好处之一是，随着我链接到的 PDF 文件更新（并且可能不会通知我），我的网站将自动保存相同的 PDF 文件（假设完整路径名不会改变，它不会）。出于这个原因，将文件转换为图像不是首选。
回答by Byron Whitlock
Well since you obviously don't want to force someone to download the bloated insecure pdf plugin, why not let them use the bloated insecure flash player?
好吧，既然您显然不想强迫某人下载臃肿的不安全 pdf 插件，为什么不让他们使用臃肿的不安全 Flash 播放器呢？
But really it is just a simple as
但实际上它只是一个简单的
<iframe src="path/to/pdf" width="500" height="700">
<iframe src="path/to/pdf" width="500" height="700">
回答by Charles Clayton
Updated answer for HTML5:
HTML5 的更新答案：
<object data="filename.pdf" type="application/pdf">
Your browser does not support pdfs, <a href="filename.pdf">click here to
download the file.</a>
</object>
You can read about it here:
你可以在这里读到它：
回答by thejh
How long is the pdf file? Can't you convert it to a very long image and display that in a div with a scrollbar?
pdf文件有多长？您不能将其转换为很长的图像并在带有滚动条的 div 中显示吗？
回答by Quazi
If you do stick with the pdf embedded option, Byron is right although embedded pdf files don't look so great on a webpage. Anyway, be sure to be strict about the coding. Hence:
如果你坚持使用 pdf 嵌入选项，拜伦是对的，尽管嵌入的 pdf 文件在网页上看起来不太好。无论如何，一定要严格编码。因此：
<iframe src="path/to/pdf" width=500 height = 700>
Should be
应该
<iframe src="path/to/pdf" width="500" height="700">
Small alteration.
小改动。
回答by PerformanceDBA
I just ftp mine, I do not use Google or any other s/w
我只是 ftp 我的，我不使用 Google 或任何其他软件
you must have some need other than a PDF file sitting in a directory, what is it?
除了放在目录中的 PDF 文件之外，您肯定还有其他需要，它是什么？
Also, why would you convert the image (and reduce PDF resolution and clarity) ?
另外，为什么要转换图像（并降低 PDF 分辨率和清晰度）？
Response to Comments
回复评论
That is the ugliest thing I have seen since my last trip to Africa. You are not seriously thinking of posting that much information on a single page, are you. No one can read it, and I tried every magnification.
这是我上次去非洲旅行以来见过的最丑陋的事情。您并没有认真考虑在一个页面上发布这么多信息，是吗。没有人可以阅读它，我尝试了所有放大倍数。
For that amount of info, you need to take an architectural approach.
对于这么多信息，您需要采用架构方法。
Put a few controls on the front page, and feed the user a small amount of manageable info, about the area that they chose. Only.
Get the info from the source website/database and feed it into your website/database. Only needs to change when the source data changes. The whole linkage can be automated.
Then you just create nice clean pages, with a reasonable quantity of info, in a readable form, on each page.
This is a 20th Century Timetable. Note, not a 21st century timetable (look at Berlin or München for one of those). You really can't just scan an intense doc and provide it as an embedded PDF.
- Note that you do not need the elaborate controls of CityRail. you can have just a few to allow select of the line and timetable.
- then produce a page that is a simple form of the CityRail page.
- or (the absolute minimum) one fully viewable, full size PDF per web page.
.
Like this simple viewable PDF. That example could be served up in one PDF for page 1 and 4 separate PDF pages for the rest; PDFs already have basic navigation, so I have used that feature and produced one 5-pager instead. Make sure you find and use the blue glass buttons and follow the navigation hints on the left top and bottom of each page.
Second to demonstrating the PDFs and navigation, look at the folder: the files are all PDFs.
Back to the original question. Now you canembed PDFs, but if you do, please do not mess with them. All the controls you have on the linked page are redundant; any browser facilitiates that even now, and will be doing so better in future. Eg. in simple viewable PDF, use your browser controls to increase/decrease magnification, move around the doc, etc.
Let's assume you finish your Google Maps page, that's the first or index page. Draw all the train lines in; when the user clicks on a train line, it takes them to either (a) a clean page produced from your db as per (1) which will look like (2), or (b) a single clean PDF in readable form as per (3). You could do the whole project just by manipulating files in directories.
在首页上放置一些控件，并向用户提供少量可管理的信息，关于他们选择的区域。仅有的。
从源网站/数据库获取信息并将其输入您的网站/数据库。只需要在源数据改变时改变。整个联动可以自动化。
然后，您只需创建漂亮干净的页面，在每个页面上以可读的形式包含合理数量的信息。
这是20世纪的时间表。请注意，不是 21 世纪的时间表（看看柏林或慕尼黑的时间表）。您真的不能只扫描一份内容丰富的文档并将其作为嵌入式 PDF 提供。
- 请注意，您不需要 CityRail 的精心控制。你可以只选择几个线路和时间表。
- 然后生成一个页面，它是 CityRail 页面的简单形式。
- 或（绝对最小值）每个网页一个完全可查看的全尺寸 PDF。
.
就像这个简单的可查看 PDF 一样。该示例可以在第 1 页的一个 PDF 和 4 个单独的 PDF 页面中提供；PDF 已经具有基本导航功能，因此我使用了该功能并生成了一个 5 页的页面。确保找到并使用蓝色玻璃按钮，并按照每个页面左上角和底部的导航提示进行操作。
其次是演示 PDF 和导航，查看文件夹：文件都是 PDF。
回到最初的问题。现在您可以嵌入 PDF，但如果您这样做，请不要弄乱它们。您在链接页面上的所有控件都是多余的；即使是现在，任何浏览器都会促进这一点，并且将来会做得更好。例如。在简单的可查看 PDF 中，使用您的浏览器控件来增加/减少放大率、在文档中移动等。
假设您完成了 Google 地图页面，即第一个页面或索引页面。画出所有的火车线路；当用户点击火车线路时，它会将他们带到 (a) 根据 (1) 从您的数据库生成的干净页面，看起来像 (2)，或 (b) 根据(3). 您可以通过操作目录中的文件来完成整个项目。
A lotless work. No Google docs; no intermediate s/w to constrict you or work around. You can forget about IE and itsmultiple incarnations and strangulations; any other browser and itslimitations. Concentrate on the data, and getting it out there in presentable form, not on the pitiful s/w and its fits and starts.
一个很多较少的工作。没有谷歌文档；没有中间软件来限制你或解决。你可以忘记 IE及其多重化身和扼杀；任何其他浏览器及其限制。专注于数据，并以可展示的形式将其发布出来，而不是那些可怜的软件和它的时断时续。
Cheers
干杯
回答by Azamat Razakov
Probably the best approach is to use the PDF.JS library. It's a pure HTML5/JavaScript renderer for PDF documents without any third-party plugins.
可能最好的方法是使用 PDF.JS 库。它是一个用于 PDF 文档的纯 HTML5/JavaScript 渲染器，没有任何第三方插件。
Online demo: http://mozilla.github.com/pdf.js/web/viewer.html
在线演示：http: //mozilla.github.com/pdf.js/web/viewer.html
GitHub: https://github.com/mozilla/pdf.jsenter link description here
GitHub: https://github.com/mozilla/pdf.js在此处输入链接描述
You can also use Google PDF viewer for this purpose. As far as I know it's not an official Google feature (am I wrong on this?), but it works for me very nicely and smoothly. You need to upload your PDF somewhere before and just use its URL:
为此，您也可以使用 Google PDF 查看器。据我所知，这不是 Google 的官方功能（我错了吗？），但它对我来说非常好和顺利。您需要在某处之前上传您的 PDF 并使用其 URL：
<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>
回答by srinath
From HTML5 :
从 HTML5 ：
<embed src="url" type="media-type" height="" width=""/>
For media-type refer, http://www.iana.org/assignments/media-types/media-types.xhtml
对于媒体类型，请参阅http://www.iana.org/assignments/media-types/media-types.xhtml
回答by Binaya Shrestha
Google Docs offers an undocumented feature that lets you embed PDF files and PowerPoint presentations in a web page. The files don't have to be uploaded to Google Docs, but they need to be available online.
Google Docs 提供了一项未公开的功能，可让您在网页中嵌入 PDF 文件和 PowerPoint 演示文稿。这些文件不必上传到 Google Docs，但需要在线可用。
Here's the code I used to embed the PDF file:
这是我用来嵌入 PDF 文件的代码：
but you should replace the bold URL with your own address. As I mentioned, the document viewer works for PDF and PPT files.
但您应该用您自己的地址替换粗体 URL。正如我提到的，文档查看器适用于 PDF 和 PPT 文件。
http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html
http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html
