Html 如何嵌入具有响应宽度的 PDF 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16468961/
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 embed PDF file with responsive width
提问by emersonthis
I'm embedding pdf files using something like this:
我正在使用这样的东西嵌入 pdf 文件：
<div class="graph-outline">
<object style="width:100%;" data="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf">
<embed src="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf" />
</object>
</div>
It works but I want to set the pdf width to match the width of the containing div. Currently it shows up like an iframe with scrollbars, so to view the entire pdf, you have to scroll right to left. I want the pdf to fit the width of the container.
它有效，但我想设置 pdf 宽度以匹配包含 div 的宽度。目前它显示为带有滚动条的 iframe，因此要查看整个 pdf，您必须从右向左滚动。我希望 pdf 适合容器的宽度。
How do I fix this? I'm supporting IE8 and up.
我该如何解决？我支持 IE8 及更高版本。
Here is a jsfiddle: http://jsfiddle.net/s_d_p/KTkcj/
这是一个 jsfiddle：http: //jsfiddle.net/s_d_p/KTkcj/
回答by dhanasekar
Simply do this:
只需这样做：
<object data="resume.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="resume.pdf">click here to
download the PDF file.</a></p>
</object>
回答by C. David Maxey
If you're using Bootstrap 3, you can use the embed-responsive class and set the padding bottom as the height divided by the width plus a little extra for toolbars. For example, to display an 8.5 by 11 PDF, use 130% (11/8.5) plus a little extra (20%).
如果您使用 Bootstrap 3，您可以使用嵌入响应类并将填充底部设置为高度除以宽度加上工具栏的一些额外内容。例如，要显示 8.5 x 11 PDF，请使用 130% (11/8.5) 加上一点额外 (20%)。
<div class='embed-responsive' style='padding-bottom:150%'>
<object data='URL.pdf' type='application/pdf' width='100%' height='100%'></object>
</div>
Here's the Bootstrap CSS:
这是 Bootstrap CSS：
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
回答by chrwahl
I did that mistake once - embedding PDF files in HTML pages. I will suggest that you use a JavaScript library for displaying the content of the PDF. Like https://github.com/mozilla/pdf.js/
我曾经犯过这个错误 - 在 HTML 页面中嵌入 PDF 文件。我建议您使用 JavaScript 库来显示 PDF 的内容。像https://github.com/mozilla/pdf.js/
回答by Surya R Praveen
<html>
<head>
<style type="text/css">
#wrapper{ width:100%; float:left; height:auto; border:1px solid #5694cf;}
</style>
</head>
<div id="wrapper">
<object data="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf" width="100%" height="100%">
<p>Your web browser doesn't have a PDF Plugin. Instead you can <a href="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf"> Click
here to download the PDF</a></p>
</object>
</div>
</html>
回答by Nimm drei
<embed src="your.pdf" type="application/pdf#view=FitH" width="actual-width.px" height="actual-height.px"></embed>Check this link for all PDF Parameters: https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#page=7
检查所有 PDF 参数的链接：https: //www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#page=7
Chrome has its own PDF reader & all parameter don't work on chrome. Mozilla is worst for handling PDFs.
Chrome 有自己的 PDF 阅读器，所有参数都不适用于 Chrome。Mozilla 最不适合处理 PDF。
回答by Jules S.
<object data="resume.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="resume.pdf">click here to
download the PDF file.</a>
</p>
</object>
