如何使用 html5 和 jquery 在网页中显示 pdf 内容？

Posted 2023-02-24

【中文标题】如何使用 html5 和 jquery 在网页中显示 pdf 内容？

【英文标题】：How to display pdf content in web page using html5 and jquery?

【发布时间】：2012-10-16 13:19:23

【问题描述】：

如何在我的 div 中显示 pdf 文档。我正在使用 HTML5 和 jquery 来构建我的移动网站。我需要在 Turnjs div 中显示我的 pdf 文档 需要翻页并转到特定页面

【问题讨论】：

您想在 div 中嵌入 Adob​​e Reader？

【参考方案1】：

<div>
<object data="test.pdf" type="application/pdf"  >
alt : <a href="test.pdf">test.pdf</a>
</object>
</div> 

阅读此主题 - http://www.webdeveloper.com/forum/showthread.php?152923-PDF-within-a-DIV

【讨论】：

它很酷，但我想在 Turnjs div 中使用它，我如何使用 turnjs 实现？单独 div 中的单独页面

请查看这些链接 1:github.com/blasten/turn.js/issues/89 2:maxims6n.bget.ru/pdf_books/demo_21.html

【参考方案2】：

您可以使用此代码：

<embed src="http://domain.com/your_pdf.pdf"    pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">

或使用 Google Docs 可嵌入 PDF 查看器：

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

【讨论】：

在桌面浏览器中运行良好，但在移动浏览器中无法正常运行...如何使其在移动浏览器中运行？

【参考方案3】：

我敢说它的名字怕被骂，但你可以使用 iframe 并允许浏览器提供导航。

【参考方案4】：

我所做的是将 pdf 文件拖到谷歌驱动器。然后，点击新的pdf（通常在google drive的左上角），点击顶部的分享图标，进入advanced，然后点击change并制作确保单击“公共”单选按钮。点击保存，然后点击完成。 现在回到谷歌驱动器，点击pdf打开它，然后点击弹出图标（右上角，X关闭图标旁边）。 pdf 现在全屏后，单击 : more actions 图标（三个垂直点）在那里您将找到“嵌入”机会。单击它，您将获得嵌入代码。瞧！！

注意：通过这种方式获得的 pdf 可以粘贴到您的博客或 HTML 网站中，并且文档中的任何链接都可以使用！！并且，右上方会有一个小弹出图标，悬停时，会使pdf全屏显示。而且，如果您想在页面上放置多个，可以将其弹出到 div 中。一些示例位于http://internetpdf.com。

约翰·伯奇

【讨论】：

我觉得应该是评论