最終更新日：190909 原本2019-02-03

javascript – iframe内にpdfファイルを含むHTMLページ全体を印刷する

私は、HTMLページの中に比較的小さいpdfファイルを埋め込み、iframeの中にpdfファイルを含む全体のhtmlパデを印刷するという割り当てを持っています。
これが私のhtmlページの構造です。
enter image description here

これが私のコードです：

@media print{
	body * {display:block;}
    .toPrint{display:block; border:0; width:100%; min-height:500px}
<body>
    <button onclick="window.print()">Print</button>

	<h3>MUST BE PRINTED</h3>
    <p> MUST BE PRINTED</p>
    <iframe class="toPrint" src="https://nett.umich.edu/sites/default/files/docs/pdf_files_scan_create_reducefilesize.pdf" style="width:100%; height:97vh;"></iframe>
	<h3>MUST BE PRINTED</h3>
    <p> MUST BE PRINTED</p>
</body>

現在私はcss @media queryを使ってページを印刷しています。しかし残念ながら、このメディアクエリはpdfの最初のページだけを印刷します。

pdfファイル全体を印刷することはできますか？

ベストアンサー
PDF全体を印刷していないのは、iframe内にあり、高さが固定されているからです。 PDF全体を印刷するには、そのコンテンツの高さと一致するようにiframeの高さが必要です（iframeにスクロールバーがあってはいけません）。

他のオプションはiframeだけを印刷することです。あなたのiFrameにidを追加します。

<iframe id="toPrint" class="toPrint"></iframe>

iframeに焦点を合わせてその内容を印刷します。

var pdfFrame = document.getElementById("toPrint").contentWindow;

pdfFrame.focus();
pdfFrame.print();

関連記事

関連記事をもっと見る

転載記事の出典を記入してください: javascript – iframe内にpdfファイルを含むHTMLページ全体を印刷する - コードログ