如何在 HTML 页面中嵌入 PDF?

wri*_*wan 7 html javascript pdf openoffice.org node.js

我需要在 HTML 页面中嵌入一个 PDF 文件,供用户在每个主要设备上查看。 大多数方法在桌面上运行良好,但在 iPad 设备上开始出现问题。如果放置在 iframe 或 embed 标签内,PDF 将不再可滚动。

我使用以下技术来解决这个问题:

1) 使用pdf-image作为节点并将 PDF 转换为图像,然后在 div 中滑动它们。这种方法的问题是图像质量下降,不适合在 Web 上查看。

2) 使用Mozilla 的PDF.js它在所有设备上都可以正常工作,但它使页面在 iPad上变得极其缓慢且无响应

3) 使用 Google PDF 查看器

<iframe src="https://docs.google.com/viewer?url=http://public-Url-of-pdf.pdf&embedded=true" frameborder="0" height="500px" width="100%"></iframe>
Run Code Online (Sandbox Code Playgroud)

这种方法问题是我需要公开我的 PDF,出于安全原因我不想这样做。

以上方法都不适合我。是否有任何解决方案可用于将 PDF 嵌入也适用于 iPad 的页面。

我的一位同事告诉我使用无头的 LibreOffice(开放式办公室)在我的页面中嵌入 PDF,但我找不到任何有关它用法的文档?

有人可以帮忙吗?:(

提前致谢!

PPS*_*ein 5

<embed src="http://example.com/the.pdf" width="500" height="375" />
Run Code Online (Sandbox Code Playgroud)

尝试上面的纯HTML. 但另一种选择是,如果您想与 javascript 一起使用,请尝试Pdf.js使用mozilla. https://github.com/mozilla/pdf.js

  • 不适用于 iPad。我已经在我的问题中提到过这一点。 (2认同)

Nod*_*nja 4

我认为将 PDF 嵌入网页的最简单方法是使用对象标签:

<object data="assets/test.pdf" type="application/pdf" width="100%" height="800px">
 <p>It appears you don't have a PDF plugin for this browser.
 No biggie... you can <a href="assets/test.pdf">click here to
  download the PDF file.</a></p>
</object>
Run Code Online (Sandbox Code Playgroud)

上面的代码将执行的操作是: - 如果浏览您网站的用户有 PDF 查看器插件(某些浏览器默认包含该插件),它将在浏览器中打开 PDF: - 如果用户没有 PDF 查看器插件,他们将看到一个下载 PDF 并在其网站上查看的链接。