如何在网站中嵌入 PDF 文件？

Posted 2023-03-13

【中文标题】如何在网站中嵌入 PDF 文件？

【英文标题】：How to embed a PDF file in a web site?

【发布时间】：2011-05-04 05:13:55

【问题描述】：

我只是想在网站中嵌入 PDF 文件。

我找到的最佳解决方案是 Google Docs Viewer (http://docs.google.com/viewer)，但它不适用于 IE，显然这对我不起作用。

谁有一个干净，简单的解决方案？

更新：我应该补充一点，以 Google 查看器的方式嵌入 PDF 文件的好处之一是，随着我链接到的 PDF 文件得到更新（它可能会在不通知我的情况下更新），我的网站将自动保存相同的 PDF 文件（前提是完整的路径名没有改变，但它没有）。由于这个原因，将文件转换为图像不是首选。

【问题讨论】：

@Ionut - 我很高兴我不是您的客户之一。我希望你是在开玩笑。

@Ionut，哈，我听到了，但这是一个针对 SEO 进行优化的网站，所以我无权选择他们使用的浏览器类型。现在大约 60% 的用户使用 IE，所以相当大。

@Byron：是的，我在开玩笑。但是，G.Docs 查看器似乎甚至可以在 IE6 上运行 :)

【参考方案1】：

既然您显然不想强迫某人下载臃肿的不安全 pdf 插件，为什么不让他们使用臃肿的不安全 Flash 播放器？

http://flexpaper.devaldi.com/

但实际上它只是一个简单的

<iframe src="path/to/pdf" width="500" height="700">

【讨论】：

我希望它至少在某种程度上针对移动浏览器进行了优化，所以不想疏远我的 iphone 用户或一些 android 用户。不过不错的选择 - 这很有趣。

【参考方案2】：

如果您确实坚持使用 pdf 嵌入选项，那么 Byron 是对的，尽管嵌入的 pdf 文件在网页上看起来不太好。无论如何，一定要严格编码。因此：

<iframe src="path/to/pdf" width=500 height = 700>

应该是

<iframe src="path/to/pdf"  >

小改动。

【参考方案3】：

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>

你可以在这里阅读：

http://www.w3schools.com/tags/tag_object.asp

【讨论】：

移动设备似乎不支持。我只是在 android 上的 chrome 和 firefox 上遇到插件丢失错误。

你说得对 embed 已过时，更新我的答案以更新。

【参考方案4】：

pdf文件有多长？你不能把它转换成一个很长的图像并在一个带有滚动条的 div 中显示吗？

【讨论】：

只有几页。有没有简单的方法可以转换成图片？

@JWM：Photoshop 可以转换它们。

这其实是个好主意。它完全独立于平台（当然，搜索和选择文本等的所有可能性都消失了）

我不太在乎搜索、选择文本……我可以选择这个。

【参考方案5】：

可能最好的方法是使用 PDF.JS 库。它是一个纯 HTML5/javascript 的 PDF 文档渲染器，没有任何第三方插件。

在线演示：http://mozilla.github.com/pdf.js/web/viewer.html

GitHub：https://github.com/mozilla/pdf.js enter link description here

您也可以为此目的使用 Google PDF 查看器。据我所知，这不是谷歌的官方功能（我错了吗？），但它对我来说非常顺利和顺利。您需要先在某处上传您的 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>

【参考方案6】：

我只是 ftp 我的，我不使用 Google 或任何其他软件

除了目录中的 PDF 文件之外，您肯定还有其他需求，它是什么？

另外，为什么要转换图像（并降低 PDF 分辨率和清晰度）？

回复评论

这是我上次去非洲以来见过的最丑陋的事情。您并没有认真考虑在单个页面上发布这么多信息，是吗。没有人可以阅读它，我尝试了所有放大倍数。

对于这么多信息，您需要采用架构方法。

在首页放置一些控件，并为用户提供少量关于他们选择的区域的可管理信息。仅有的。

从源网站/数据库获取信息并将其输入您的网站/数据库。仅在源数据更改时才需要更改。整个链接可以自动化。

然后，您只需在每个页面上以可读的形式创建漂亮干净的页面，并包含合理数量的信息。

这是20th Century Timetable。注意，不是 21 世纪的时间表（看看柏林或慕尼黑就是其中之一）。您真的不能只扫描一个密集的文档并将其作为嵌入式 PDF 提供。

请注意，您不需要 CityRail 的精细控制。您可以只选择几条线路和时间表。 然后生成一个简单的 CityRail 页面形式的页面。 或（绝对最小值）每个网页一个完全可查看的全尺寸 PDF。 .

喜欢这个simple viewable PDF。该示例可以在第 1 页的一个 PDF 中提供，其余的可以在 4 个单独的 PDF 页面中提供； PDF 已经具备基本导航功能，因此我使用了该功能并制作了一个 5 页的文件。确保找到并使用蓝色玻璃按钮，并按照每个页面左上角和左下角的导航提示进行操作。

在演示 PDF 和导航之后，查看文件夹：文件都是 PDF。

回到原来的问题。现在您可以嵌入 PDF，但如果您这样做了，请不要乱用它们。您在链接页面上拥有的所有控件都是多余的；即使是现在，任何浏览器都可以促进这一点，并且将来会做得更好。例如。在简单的可查看 PDF 中，使用浏览器控件来增加/减小放大率、在文档中移动等。

假设您完成了 Google 地图页面，即第一页或索引页。画出所有的火车线；当用户点击火车线路时，它会将他们带到（a）根据（1）从您的数据库生成的干净页面，看起来像（2），或者（b）按照可读形式的单个干净 PDF (3)。您可以通过操作目录中的文件来完成整个项目。

少了很多的工作。没有谷歌文档；没有中间软件来限制您或解决问题。你可以忘记 IE 和 它的 多个化身和扼杀；任何其他浏览器及其其限制。专注于数据，并以可展示的形式将其发布到那里，而不是可怜的 s/w 及其时断时续。

干杯

【讨论】：

好的，好问题。我要创建的示例页面的 URL 在这里：thechicagometratrain.com/bnsf-schedule-v2.php

@JWM。在我的回答中做出了回应。请提出进一步澄清的问题。

【参考方案7】：

来自 HTML5：

<embed src="url" type="media-type"  />

媒体类型请参考http://www.iana.org/assignments/media-types/media-types.xhtml

【参考方案8】：

Google 文档提供了一项未记录的功能，可让您在网页中嵌入 PDF 文件和 PowerPoint 演示文稿。这些文件不必上传到 Google 文档，但需要在线提供。

这是我用来嵌入 PDF 文件的代码：

但您应该将粗体 URL 替换为您自己的地址。正如我所提到的，文档查看器适用于 PDF 和 PPT 文件。

http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html