如何在 HTML 页面中嵌入 PDF？答案

【问题标题】：How to embed a PDF in an HTML page?如何在 HTML 页面中嵌入 PDF？
【发布时间】：2019-05-13 09:05:26
【问题描述】：

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

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

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>

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

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

我的一位同事告诉我使用 LibreOffice(open office) headless 在我的页面中嵌入 PDF，但我找不到任何关于它的使用文档？

有人可以帮忙吗？ :(

提前致谢！

【问题讨论】：

这可能会对您有所帮助。 w3docs.com/snippets/html/how-to-embed-pdf-in-html.html

标签： javascript html node.js pdf openoffice.org

【解决方案1】：

<embed src="http://example.com/the.pdf" width="500" height="375" />

尝试以上一个纯HTML。但另一种选择是，如果您想使用 javascript，请尝试 Pdf.js by mozilla。 https://github.com/mozilla/pdf.js

【讨论】：

不适用于 iPad。我已经在我的问题中提到了这一点。
你在告诉我我已经尝试过的事情。请阅读我的问题
无响应意味着它取决于您的 pdf 大小。加载 pdf 时您的页面将冻结。那个时候，你最好在页面加载的时候做一些棘手的部分，比如在页面加载时创建visibility: hidden，在页面加载完成时更改为visibility: inline。

【解决方案2】：

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

<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>

上面的代码会做的是： - 如果浏览您网站的用户有 PDF 查看器插件（某些浏览器默认包含该插件），它将在浏览器中打开 PDF： - 如果用户没有 PDF 查看器插件，他们将看到下载 PDF 并在其网站上查看的链接。

【讨论】：

让我在 iPad 上试试
不适用于 iPad :( 只显示第一页和第二页的一部分。并且没有滚动条可用于滚动 pdf
@PyaePhyoeShein 我只在 safari 上测试这个。有什么解决方法吗？
@writeToBhuwan 我不知道将<object> 用于苹果设备。你能试试我在帖子下提到的吗？
@writeToBhuwan 这是对象标签的浏览器兼容性列表：developer.mozilla.org/en-US/docs/Web/HTML/Element/… 是否可以在 Stackblitz 上发布您的费用

【解决方案3】：

我在这个问题上花了很多时间，终于找到了在 HTML 文件中嵌入 PDF 的解决方案，这也是受这篇文章的启发。您提到由于质量问题，“将 PDF 转换为图像然后在 div 中滑动它们”并不令人满意。由于图像模糊，我在这里遇到了同样的情况。

但是，我尝试将图像转换为 SVG 而不是 PNG，但情况有所不同：嵌入图像时字体非常清晰，如下所示：

<object type="image/svg+xml" data="https://ik.imagekit.io/nudvztcu8my/pdf2svg_example_Ft2FQgqWaG.svg">
    <!-- Your fall back here -->
    <img src="https://ik.imagekit.io/nudvztcu8my/pdf2svg_example_Ft2FQgqWaG.svg" />
</object>

您可以直接将该 sn-p 粘贴到 HTML 文件中，您将看到结果。为了生成这个例子，我使用了一个随机的 PDF from ArXiv.org 和 converted it to SVG 并使用了一个在线转换器。

还有免费的命令行工具，如 pdf2svg 或商业 API，如 Aspose，可能值得研究哪种方法能提供最佳结果。

您可以轻松构建一个动态加载 SVG 图像的滑块，并且由于 SVG 图像的矢量字符，甚至可以将它们缩放到不同的视口。到目前为止，该方法适用于我尝试过的所有 PDF，但可能建议实施仍然使用 PNG 的后备解决方案。

【讨论】：