我该如何在 .html 页面中使用 web 浏览器显示 pdf 文件？
19个回答
132
我使用谷歌文档可嵌入的PDF阅读器。这些文档不必上传到谷歌文档，但它们必须在线上可用。
<iframe src="http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
- bradenkeith
7
3使用此解决方案，一些用户无法查看PDF文件，而需要先登录Google账号。 - Philipp Zedler
47关于这个解决方案，我有一个问题。谷歌会在其服务器上存储我的PDF文件副本吗？我的内容隐私会得到保护吗？ - hd.
@Alex 要确定的话，可以尝试一下... 我会尝试使用 - ://docs.google.com/gview?url=://path.com/to/your/pdf.pdf&embedded=true 作为 iframe 的 src。 - bradenkeith
6@hd。是的，谷歌只是通过其嵌入式显示来显示PDF。 我不认为他们会保留副本，尽管他们必须将其转换为逐页显示的格式，因此我预计他们最终会基于每页转换为PNG。对于使用此答案的任何人，请注意，谷歌对非谷歌文档文档有带宽限制。 一旦耗尽，PDF将不会显示，只会出现一个带宽已超限并请稍后再试的消息。 - Jon
太棒了。节省了很多时间。 - Pankaj Shinde
显示剩余2条评论
31
建议使用 object 标签
<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1'
type='application/pdf'
width='100%'
height='700px'>
请注意，您可以将宽度和高度更改为任何值，请访问http://www.w3schools.com/tags/tag_object.asp
- BAKARI SHEGHEMBE
5
你发布的点赞并没有提供更多关于答案的见解。 - Daniël W. Crompton
4如何在网页内展示PDF文件？使用HTML5中的<object>标签可以帮助实现。您可以使用以下代码将PDF文件嵌入到HTML页面中：<object width="400" height="400" data="yourfilename.pdf"></object>，<object>标签还可以用于嵌入音频、视频、Java小程序、ActiveX、Flash等多种格式的多媒体内容。 - BAKARI SHEGHEMBE
你说得完全正确，然而w3schools的链接并没有提供更多信息来补充你所写的答案。 - Daniël W. Crompton
如果您的浏览器中没有任何PDF查看器，这将无法正常工作。 - Umair Hamid
1是的，这是真的。object标签的好处之一是它可以检测到。它允许您为访问者提供通过gdrive、onedrive等方式查看页面的进一步选项。<object data='http://www.example.com/path.pdf#toolbar=1'type='application/pdf' width='100%' height='700px'><p>似乎您的Web浏览器未配置为显示PDF文件。
别担心，只需<a href='http://www.example.com/path.pdf'>点击此处下载PDF文件。</a>或<a href="https://drive.google.com/[drive path]/view?usp=sharing"> 点击此处查看</a></p>
</object> - BAKARI SHEGHEMBE
21
最简单的方法是创建一个iframe并将源设置为PDF的URL。
（躲避疯狂的HTML设计师）我自己做过，效果很好，跨浏览器（爬进掩体）。
- user1228
4
9如果你在IE浏览器上没有安装PDF插件，那么它就无法工作。 - Collin Anderson
3那怎么显而易见呢？似乎是“跨浏览器”这个词的一个有用补充。 - showdev
1这比所有其他第三方工具都容易设置。我不知道它在2011年的表现如何，但在2016年，它非常快速且充满有用的功能。而且似乎在Chrome、FF和IE上都能很好地运行。 - slaw
1在我的安卓手机上，Chrome浏览器无法正常工作：它会下载PDF并在另一个应用程序中打开（如果您有一个）。而在iOS的Safari浏览器中，我无法滚动到其他页面，只能看到PDF的第一页。 - Vasiliy Zverev
10
浏览器的插件控制这些设置，所以你无法强制它。但是，你可以使用简单的<a href="whatver.pdf">代替<a href="whatever.pdf" target="_blank">。
- jschorr
1
1终于有人知道他们在谈论什么了。这是最好的答案，也是最简单的。@jschorr 绝对正确。浏览器控制这些设置。最有效率！！ - Val
6
- Simon Fakir
6
只要你托管PDF文件，目标属性就是正确的选择。换句话说，对于相对文件，使用值为_blank的目标属性即可正常工作。
浏览器在这两种情况下都能做出很好的表现。
<e>
<a target="_blank" alt="StackExchange Handbook" title="StackExchange Handbook"
href="pdfs/StackExchange_Handbook.pdf">StackExchange Handbook</a>
对于绝对路径，引擎将前往统一资源定位符并在其中打开它。因此，请禁止目标属性。
<e>
<a alt="StackExchange Handbook" title="StackExchange Handbook"
href="protocol://url/StackExchange_Handbook.pdf">StackExchange Handbook</a>
浏览器在这两种情况下都能做出很好的表现。
- ftcosta
1
这个解决方案对我来说比被接受的答案要好得多。同时，需要注意的是，我处理一些敏感信息，因此不让我的文档公开可见对我很重要。 - Casper Wilkes
2
你可以使用这段代码：
<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">
或使用Google文档可嵌入的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>
- Hieu Le
2
如果您不想使用第三方工具，可以使用<embed>标签，并在src属性中指定文件源。这将使用浏览器本地的PDF查看器，比object标签更受浏览器支持。
<embed src="your_pdf_src" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" type="application/pdf">
实时示例：
<embed src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" type="application/pdf">在片段中加载PDF是行不通的，因为插件加载到的框架是被沙盒化的。
在Chrome和Firefox中测试通过。 查看演示。
- Spectric
2
object 标签在 ES2015 中是标准的，取代了 embed 标签。 - manikanta1@manikanta
embed 是 HTML5 规范的一部分。请参见：https://html.spec.whatwg.org/#embedded-content-2 - Spectric2
更新-Adobe PDF嵌入API
Adobe发布了完全免费的Adobe PDF嵌入API。由于他们创建了PDF格式本身，因此他们的API可能是最好的。
- 它提供了可用的最高质量PDF渲染。
- 您可以完全自定义用户体验并选择如何显示PDF。
- 您还将获得有关PDF使用情况的分析，以便了解用户与PDF的交互方式，包括在页面上花费的时间和搜索。
您所要做的就是创建一个api_key并在代码片段中使用它。
将PDF作为缓冲区显示
这是代码片段的示例，如果您有缓冲区（例如本地文件），只需将其添加到HTML中即可利用他们的API来显示PDF。您需要添加{ promise: <FILE_PROMISE> }配置。
<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content: { promise: <FILE_PROMISE> }
metaData: { fileName: "file_name_to_display" }
}, {});
});
</script>
通过file_url显示PDF文件
以下是一个代码片段的示例，您可以将其添加到您的HTML中，并利用他们的API来显示由file_url提供的PDF文件。您需要添加{ location: { url: "pdf文件的url" } }配置。
<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content: { location: { url: "url_of_the_pdf" } },
metaData: { fileName: "file_name_to_display" }
}, {});
});
</script>
- NeNaD
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接