Html 在网络浏览器中显示 PDF
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4853898/
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
Display PDF within web browser
提问by CodeGuy
How can I display a pdf within a web browser on an .html page?
如何在 .html 页面上的 Web 浏览器中显示 pdf？
回答by bradenkeith
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="http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
回答by navins
instead of using iframe and depending on the third party`think about using flexpaper, or pdf.js.
而不是使用 iframe 并取决于第三方`考虑使用 flexpaper 或 pdf.js。
I used PDF.js, it works fine for me. Here is the demo.
回答by navins
回答by BAKARI SHEGHEMBE
preffered using the object tag
首选使用对象标签
<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1'
type='application/pdf'
width='100%'
height='700px'>
note that you can change the width and height to any value you please visit http://www.w3schools.com/tags/tag_object.asp
请注意，您可以将宽度和高度更改为任何值，请访问 http://www.w3schools.com/tags/tag_object.asp
回答by jschorr
The browser's plugin controls those settings, so you can't force it. However, you can do a simple <a href="whatver.pdf">instead of <a href="whatever.pdf" target="_blank">.
浏览器的插件控制这些设置，所以你不能强制它。但是，您可以执行简单的<a href="whatver.pdf">而不是<a href="whatever.pdf" target="_blank">.
回答by ftcosta
As long as you host the PDF the target attribute is the way to go. In other words, for relative files, using the target attribute with _blank value will work just fine.
只要您托管 PDF，目标属性就是要走的路。换句话说，对于相对文件，使用带有 _blank 值的目标属性就可以了。
<e>
<a target="_blank" alt="StackExchange Handbook" title="StackExchange Handbook"
href="pdfs/StackExchange_Handbook.pdf">StackExchange Handbook</a>
For absolute paths engines will go to the Unified Resource Locator and open it their. So, suppress the target attribute.
对于绝对路径引擎会去ûnified [Resource大号ocator并打开它自己。所以，抑制目标属性。
<e>
<a alt="StackExchange Handbook" title="StackExchange Handbook"
href="protocol://url/StackExchange_Handbook.pdf">StackExchange Handbook</a>
Browsers will make a rely good job in both cases.
在这两种情况下，浏览器都会做得很好。
回答by Nils Magne Lunde
You can also embed using JavaScript through a third-party solution like PDFObject.
您还可以通过第三方解决方案（如PDFObject ）使用 JavaScript 嵌入。
回答by Hieu Le
You can use this code:
您可以使用此代码：
<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">
Or use Google Docs embeddable PDF viewer:
或使用 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>
回答by Asuquo12
You can also have this simple GoogleDoc approach.
您也可以使用这种简单的 GoogleDoc 方法。
<a style="color: green;" href="http://docs.google.com/gview?url=http://domain//docs/<?php echo $row['docname'] ;?>" target="_blank">View</a>
This would create a new page for you to view the doc without distorting your flow.
这将为您创建一个新页面来查看文档而不会扭曲您的流程。
回答by Marcus
I recently needed to provide a more mobile-friendly, responsive version of a .pdf document, because narrow phone screens required scrolling right and left a lot. To allow just vertical scrolling and avoid horizontal scrolling, the following steps worked for me:
我最近需要提供一个更适合移动设备的响应式 .pdf 文档版本，因为窄的手机屏幕需要经常左右滚动。为了只允许垂直滚动并避免水平滚动，以下步骤对我有用：
- Open the .pdf in Chrome browser
- Click Open with Google Docs
- Click File > Download > Web Page
- Click on the downloaded document to unzip it
- Click on the unzipped HTML document to open it in Chrome browser
- Press fn F12 to open Chrome Dev Tools
- Paste copy(document.documentElement.outerHTML.replace(/padding:72pt 72pt 72pt 72pt;/, '').replace(/margin-right:.*?pt/g, '')) into the Console, and press Enter to copy the tweaked document to the clipboard
- Open a text editor (e.g., Notepad), or in my case VSCode, paste, and save with a .html extension.
- 在 Chrome 浏览器中打开 .pdf
- 单击使用 Google 文档打开
- 单击文件 > 下载 > 网页
- 点击下载的文件解压
- 点击解压后的 HTML 文件在 Chrome 浏览器中打开
- 按 fn F12 打开 Chrome Dev Tools
- 将 copy(document.documentElement.outerHTML.replace(/padding:72pt 72pt 72pt 72pt;/, '').replace(/margin-right:.*?pt/g, '')) 粘贴到控制台中，然后按 Enter将调整后的文档复制到剪贴板
- 打开文本编辑器（例如记事本），或者在我的情况下打开 VSCode，粘贴并使用 .html 扩展名保存。
The result looked good and was usable in both desktop and mobile environments.
结果看起来不错，可用于桌面和移动环境。
