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

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ファイルを埋め込むという間違いを一度しました。PDF のコンテンツを表示するには、JavaScript ライブラリを使用することをお勧めします。https://github.com/mozilla/pdf.js/のように

于 2014-11-04T21:04:58.763 に答える
0

PHP の第一人者ではない観点から見ると、これはまさに私たちが望んでいたことを行うはずです。

<style>
    [name$='pdf'] { width:100%; height: auto;}
</style>
于 2020-06-27T12:25:08.657 に答える