如何以 HTML 格式显示 PDF 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17784037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display PDF file in HTML?
提问by vivek
I have an auto generated PDF file by itextand I need to display that PDF file in HTML. My question is: How to display a local PDF file in HTML using pdf.js? Should that PDF file be generated by some standards?
我有一个由itext自动生成的 PDF 文件，我需要以 HTML 格式显示该 PDF 文件。我的问题是：如何使用pdf.js以 HTML 格式显示本地 PDF 文件？应该按照某些标准生成该 PDF 文件吗？
回答by Gofilord
Implementation of a PDF file in your HTML web-page is very easy.
在您的 HTML 网页中实现 PDF 文件非常容易。
<embed src="file_name.pdf" width="800px" height="2100px" />
Make sure to change the width and height for your needs. Good luck!
确保根据您的需要更改宽度和高度。祝你好运！
回答by Rahul Sinha
I use Google Docs embeddable PDF viewer. The docs don't have to be uploaded to Google Docs, but they do have to be available online.
我使用 Google Docs 可嵌入的 PDF 查看器。文档不必上传到 Google 文档，但必须在线可用。
<iframe src="https://docs.google.com/gview?url=https://path.com/to/your/pdf.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
回答by Rahul Sinha
If you want to use pdf.js, I suggest you to read THIS
如果你想使用 pdf.js，我建议你阅读这个
You can also upload your pdf somewhere (like Google Drive) and use its URL in a iframe
您还可以将 pdf 上传到某个地方（例如 Google Drive）并在 iframe 中使用其 URL
or
或者
<object data="data/test.pdf" type="application/pdf" width="300" height="200">
<a href="data/test.pdf">test.pdf</a>
</object>
回答by harun ugur
you can display easly in a html page like this
您可以在这样的 html 页面中轻松显示
<embed src="path_of_your_pdf/your_pdf_file.pdf" type="application/pdf" height="700px" width="500">回答by pradip kor
In html page for pc is easy to implement
在 html 页面中为 pc 很容易实现
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%">
but pdf show in mobile by this code is not possible you must need a plugin
但是无法通过此代码在移动设备中显示 pdf 您必须需要一个插件
if you have not responsive your site. Then above code pdf not show in mobile but you can put download option after the code
如果您的网站没有响应。然后上面的代码pdf没有显示在手机中，但您可以在代码后放置下载选项
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%" class="responsive">
<a href="study/sample.pdf">download</a>
回答by Rohith Murali
The simplestway is to use,
在最简单的方法是使用，
<iframe src="pdf-link">
</iframe>
and if its still getting downloadedinstead of viewing, check the server response header, it should have, Content-Disposition:Inlineand not, Content-Disposition:Attachment.
如果它仍然被下载而不是查看，请检查服务器响应标头，它应该有，Content-Disposition:Inline而不是，Content-Disposition:Attachment。
回答by Yash
Portable Document Format (PDF).
便携式文档格式 ( PDF)。
Any Browser ? Use _Embeddable Google Document Viewerto embed the PDF file in
iframe.<iframe src="http://docs.google.com/gview? url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"> </iframe>Only for chrome browser ? Chrome PDF viewer using plugin.
pluginspage=http://www.adobe.com/products/acrobat/readstep2.html.<embed type="application/pdf" src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf" width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html" background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21" title="CHROME">
任何浏览器？使用_Embeddable Google 文档查看器将 PDF 文件嵌入到
iframe.<iframe src="http://docs.google.com/gview? url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"> </iframe>仅适用于 chrome 浏览器？使用插件的 Chrome PDF 查看器。
pluginspage=http://www.adobe.com/products/acrobat/readstep2.html.<embed type="application/pdf" src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf" width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html" background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21" title="CHROME">
Example Sippet:
示例 Sippet：
<html>
<head></head>
<body style=" height: 100%;">
<div style=" position: relative;">
<div style="width: 100%; /*overflow: auto;*/ position: relative;height: auto; margin-top: 70px;">
<p>An
<a href="https://en.wikipedia.org/wiki/Image_file_formats" >image</a> is an artifact that depicts visual perception
</p>
<!-- To make div with scroll data [max-height: 500;]-->
<div style="/* overflow: scroll; */ max-height: 500; float: left; width: 49%; height: 100%; ">
<img width="" height="400" src="https://peach.blender.org/wp-content/uploads/poster_bunny_bunnysize.jpg?x11217" title="Google" style="-webkit-user-select: none;background-position: 0px 0px, 10px 10px;background-size: 20px 20px;background-image:linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);cursor: zoom-in;" />
<p>Streaming an Image form Response Stream (binary data) ? This buffers the output in smaller chunks of data rather than sending the entire image as a single block.
<a href="http://www.chestysoft.com/imagefile/streaming.asp" >StreamToBrowser</a>
</p>
</div>
<div style="float: left; width: 10%; background-color: red;"></div>
<div style="float: left;width: 49%; ">
<img width="" height="400" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"/>
<p>Streaming an Image form Base64 String ? embedding images directly into your HTML.
<a href="https://en.wikipedia.org/wiki/Data_URI_scheme">
<sup>Data URI scheme</sup>
</a>
<a href="https://codebeautify.org/image-to-base64-converter">
<sup>, Convert Your Image to Base64</sup>
</a>
<pre>data:[<media type>][;base64],<data></pre>
</p>
</div>
</div>
<div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">
<video style="height: 500px;width: 100%;" name="media" controls="controls">
<!-- autoplay -->
<source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/mp4">
<source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/ogg">
</video>
<p>Video courtesy of
<a href="https://www.bigbuckbunny.org/" >Big Buck Bunny</a>.
</p>
<div>
<div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">
<p>Portable Document Format
<a href="https://acrobat.adobe.com/us/en/acrobat/about-adobe-pdf.html?promoid=CW7625ZK&mv=other" >(PDF)</a>.
</p>
<div style="float: left;width: 49%; overflow: auto;position: relative;height: auto;">
<embed type="application/pdf" src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf" width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html" background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21" title="CHROME">
<p>Chrome PDF viewer
<a href="https://productforums.google.com/forum/#!topic/chrome/MP_1qzVgemo">
<sup>extension</sup>
</a>
<a href="https://chrome.google.com/webstore/detail/surfingkeys/gfbliohnnapiefjpjlpjnehglfpaknnc">
<sup> (surfingkeys)</sup>
</a>
</p>
</div>
<div style="float: left; width: 10%; background-color: red;"></div>
<div style="float: left;width: 49%; ">
<iframe src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true#:page.7" style="" width="100%" height="500px" allowfullscreen="" webkitallowfullscreen=""></iframe>
<p>Embeddable
<a href="https://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html" >Google</a> Document Viewer. Here's the code I used to embed the PDF file:
<pre>
<iframe
src="http://docs.google.com/gview?
url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
</pre>
</p>
</div>
</div>
</div>
</body>
</html>回答by DirWolf
I've had something similar before and used normally tags
我以前有过类似的东西并且通常使用标签
<a href="path_of_your_pdf/your_pdf_file.pdf" tabindex="-1"><strong>click here</strong></a>
but it's interesting to find out some other ways as above!
但像上面一样找出其他一些方法很有趣！
回答by Ukr
1. Browser-native HTML inline embedding:
1. 浏览器原生 HTML 内嵌嵌入：
<embed
src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
type="application/pdf"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></embed>
<iframe
src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></iframe>
Pro:
亲：
- No PDF file size limitations (even hundreds of MB)
- It's the fastest solution
- 没有 PDF 文件大小限制（甚至数百 MB）
- 这是最快的解决方案
Cons:
缺点：
- It doesn't work on mobile browsers
- 它不适用于移动浏览器
2. Google Docs Viewer:
2. 谷歌文档查看器：
<iframe
src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&scrollbar=0"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></iframe>
Pro:
亲：
- Works on desktop and mobile browser
- 适用于桌面和移动浏览器
Cons:
缺点：
- 25MB file limit
- Requires additional time to download viewer
- 25MB 文件限制
- 需要额外的时间来下载查看器
3. Other solutions to embed PDF:
3. 嵌入PDF的其他解决方案：
IMPORTANT NOTE:
重要的提示：
Please check the X-Frame-Options HTTP response header. It should be SAMEORIGIN.
请检查 X-Frame-Options HTTP 响应标头。它应该是 SAMEORIGIN。
X-Frame-Options SAMEORIGIN;
回答by Sufiyan Ansari
The element is supported by all browsers and defines an embedded object within an HTML document.
所有浏览器都支持该元素，并在 HTML 文档中定义嵌入对象。
Bottom line: OBJECT is Good, EMBED is Old. Beside's IE's PARAM tags, any content between OBJECT tags will get rendered if the browser doesn't support OBJECT's referred plugin, and apparently, the content gets http requested regardless if it gets rendered or not. Reference
底线：OBJECT 是好的，EMBED 是旧的。除了 IE 的 PARAM 标签之外，如果浏览器不支持 OBJECT 的引用插件，则 OBJECT 标签之间的任何内容都将被呈现，显然，无论是否呈现，内容都会被 http 请求。参考
Working code: https://www.w3schools.com/code/tryit.asp?filename=G7L8BK6XC0A6
工作代码：https: //www.w3schools.com/code/tryit.asp?filename=G7L8BK6XC0A6
<!DOCTYPE html>
<html>
<body>
<object width="400px" height="400px" data="https://s3.amazonaws.com/dq-blog-files/pandas-cheat-sheet.pdf"></object>
</body>
</html>