Question

我使用以下内容嵌入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/

Answer 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>

Answer 2

如果您正在使用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>

这是Bootstrap CSS：

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}

Answer 3

我犯了一次错误 - 在PDF页面中嵌入PDF文件。我建议您使用JavaScript库来显示PDF的内容。像https://github.com/mozilla/pdf.js/

一样

Answer 4

<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>

Answer 5

<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>

Answer 6

<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。

Answer 7

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

<style>
    [name$='pdf'] { width:100%; height: auto;}
</style>

如何嵌入响应宽度的PDF文件

7 个答案: