40

我正在使用这样的东西嵌入 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>

它有效，但我想设置 pdf 宽度以匹配包含 div 的宽度。目前它显示为带有滚动条的 iframe，因此要查看整个 pdf，您必须从右向左滚动。我希望 pdf 适合容器的宽度。

我该如何解决？我支持IE8及以上。

这是一个jsfiddle：http: //jsfiddle.net/s_d_p/KTkcj/

4

7 回答 7

41

只需这样做：

<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>
于 2014-06-20T14:36:38.053 回答
13

如果您使用的是 Bootstrap 3，则可以使用 embed-responsive 类并将填充底部设置为高度除以宽度加上一些额外的工具栏。例如，要显示 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>

这是引导程序 CSS：

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}
于 2016-03-18T18:38:08.723 回答
3

我曾经犯过那个错误——在 HTML 页面中嵌入 PDF 文件。我建议您使用 JavaScript 库来显示 PDF 的内容。喜欢https://github.com/mozilla/pdf.js/

于 2014-11-04T21:04:58.763 回答
1 
<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>
于 2014-05-13T10:00:07.970 回答
1 

<embed src="your.pdf" type="application/pdf#view=FitH" width="actual-width.px" height="actual-height.px"></embed>

检查此链接以获取所有 PDF 参数：https ://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#page=7

Chrome 有自己的 PDF 阅读器，所有参数都不适用于 chrome。Mozilla 最不适合处理 PDF。

于 2019-06-26T14:17:56.683 回答
0

从非 PHP 专家的角度来看，这应该完全符合我们的要求：

<style>
    [name$='pdf'] { width:100%; height: auto;}
</style>
于 2020-06-27T12:25:08.657 回答
-1 
<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>
于 2018-10-25T07:22:07.897 回答