如何嵌入PDF？

Question

我正在尝试将 PDF 嵌入 HTML 文档，但这似乎仅适用于 Chrome。其他浏览器似乎要么需要插件，要么要求用户单击不是我想要的链接。这是我尝试过的：

<object data="pdfFiles/interfaces.pdf" type="application/pdf">
    <embed src=" pdfFiles/interfaces.pdf" type="application/pdf">&nbsp;</embed>
                    alt :<a href="pdfFiles/interfaces.pdf">
</object>

Answer 1

以下是可用于每个浏览器的代码：

<embed src="pdfFiles/interfaces.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">

在 Firefox 和 Chrome 上测试

Answer 2

<iframe src="http://docs.google.com/gview?url=http://example.com/pdf.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>

Google 文档允许您通过 iframe 链接到其服务来嵌入 PDF、Microsoft Office 文档和其他应用程序。它用户友好、多功能且有吸引力。

Answer 3

这工作完美，这是官方的 html5。

<object data="https://link-to-pdf"></object>

Answer 4

你知道吗http://mozilla.github.io/pdf.js/这是mozila的一个项目，使用canvas在html中渲染pdf。使用起来超级简单。

Answer 5

我建议使用 PDFObject 进行 PDF 插件检测。

仅当用户的浏览器无法直接显示 PDF 时，这才允许您显示替代内容。例如，对于大多数用户来说，PDF 在 Chrome 中可以正常显示，但如果他们使用 Firefox 或 Internet Explorer，则需要安装 Adobe Reader 等插件。

至少 PDFObject 将允许您显示一条消息，其中包含下载 Adobe Reader 和/或 PDF 文件本身的链接（如果他们的浏览器尚未安装 PDF 插件）。

Answer 6

PDF.js查看器似乎是一个很好的解决方案。考虑使用

pdfjs-viewer-element

来简化 PDF.js 设置：

<script type="module" src="https://cdn.skypack.dev/pdfjs-viewer-element"></script>

使用

viewer-path

指定 PDF.js 发布目录，并使用

src

属性指定 PDF 文件的路径：

<pdfjs-viewer-element
  id="viewer"
  src="/file.pdf"
  viewer-path="/pdfjs-4.0.379-dist"
  style="height: 600px">
</pdfjs-viewer-element>

更多嵌入 PDF.js 的示例 https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/demo

Answer 7

FlexPaper 可能仍然是用于此类内容的最佳查看器。它有一个传统的查看器和一个更多的翻页/翻书式查看器，支持 Flash 和 html5

http://flexpaper.devaldi.com