如何将PDF嵌入HTML页面？

Question

我需要在HTML页面中嵌入PDF文件，以便用户可以在各种设备上查看。大多数方法在桌面上运行良好，但在iPad设备上会出现问题。如果将PDF放置在iframe或嵌入标签中，则无法滚动PDF。

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

1) 使用pdf-image对节点进行转换，将PDF转换为图像，然后将它们滑动到一个div中。这种方法的问题是图像质量会降低，不适合在Web上查看。

2) 使用Mozilla的PDF.js。它在每个设备上都可以正常工作，但在iPad上会使页面变得极其缓慢和无响应。

3) 使用Google PDF viewer。

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

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

上述方法都对我无效。是否有可用于在iPad上运行的页面中嵌入PDF的解决方案？

我的一个同事告诉我可以使用LibreOffice（open office）headless来嵌入PDF到我的页面中，但我找不到任何关于它使用的文档？

有人能帮忙吗？:(

提前感谢！

- writeToBhuwan

---

这可能会对你有所帮助。https://www.w3docs.com/snippets/html/how-to-embed-pdf-in-html.html - Bu Saeed

这也可能会有所帮助 https://www.sitelint.com/blog/how-to-embed-a-pdf-in-html-without-downloading-it/ - undefined

Answer 1

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

如果您只需要使用纯粹的HTML，请尝试上面的选项。但是，如果您想要与JavaScript一起使用，则可以尝试mozilla的Pdf.js。https://github.com/mozilla/pdf.js

- PPShein

---

在iPad上无法工作。我已经在我的问题中提到了这一点。 - writeToBhuwan

你告诉我一些我已经尝试过的事情。请读一下我的问题。 - writeToBhuwan

无响应意味着取决于您的PDF大小。在加载PDF时，您的页面将会冻结。此时，最好将一些棘手的部分设置为visibility: hidden，并在页面完全加载后更改为visibility: inline。 - PPShein

Answer 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文件并在其设备上查看的链接。

- Node_Ninja

---

让我在iPad上试一下。 - writeToBhuwan

在iPad上无法工作😞只显示第一页和第二页的部分内容。并且没有可用的滚动条来滚动PDF文件。 - writeToBhuwan

@PyaePhyoeShein 我只在Safari上测试了这个。有什么解决方法吗？ - writeToBhuwan

@writeToBhuwan 我不知道如何在苹果设备上使用<object>。你可以试一下我在帖子下面提到的内容吗？ - PPShein

@writeToBhuwan 这是 object 标签支持的浏览器兼容性列表： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/object#Browser_compatibility你是否可以在 Stackblitz 上发布您的成本呢？ - Node_Ninja

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

您可以直接将该代码段粘贴到HTML文件中，然后您就会看到结果。为了制作这个示例，我使用了一个随机的ArXiv.org上的PDF并使用在线转换器将其转换为SVG。

还有一些免费的命令行工具，例如pdf2svg或商业API（如Aspose），可能值得考虑哪种方法可以获得最佳结果。

您可以轻松地构建一个滑块，动态加载SVG图像，并且由于SVG图像具有矢量特性，甚至可以将它们缩放到不同的视口大小。到目前为止，这种方法适用于我尝试过的所有PDF文件，但可能建议实现一个备用方案，仍然使用PNG文件。

- Gollum22