eme*_*his 32 html css embed pdf object
我正在使用以下内容嵌入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/
dha*_*kar 29
只需这样做:
<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>
C. *_*xey 10
如果您使用的是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;
}
<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>