web-dev-qa-db-ja.com

埋め込み方法PDFレスポンシブ幅のファイル

私はこのようなものを使用して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/

htmlcssobjectpdfembed
32
emersonthis

これを行うだけです：

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

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;
}
10
C. David Maxey

HTMLページにPDFファイルを埋め込みます。PDFのコンテンツを表示するためにJavaScriptライブラリを使用することをお勧めします。Like https：// github .com/mozilla/pdf.js /

3
chrwahl
<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>
1
Surya R Praveen
<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>
0
Jules S.
<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の処理に関しては最悪です。

0
Nimm drei