如何在iframe中打印包含pdf文件的整个HTML页面?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (133)

有一个任务,在html页面内嵌入相对较小的pdf文件,并打印整个html pade,包括iframe中的pdf文件。这是我的html页面的结构:

这是我的代码:

@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查询打印页面。但这个媒体查询仅打印PDF的第一页

我能做什么打印整个PDF文件?

提问于
用户回答回答于

HTML:

<body>
        <h3>MUST BE PRINTED</h3>
        <p> MUST BE PRINTED</p>
        <div id="pdfRenderer"></div>
        <h3>MUST BE PRINTED</h3>
        <p> MUST BE PRINTED</p>
    </body>

JS:

var pdf = new PDFObject({
  url: "https://nett.umich.edu/sites/default/files/docs/pdf_files_scan_create_reducefilesize.pdf",
  id: "pdfRendered",
  pdfOpenParams: {
    view: "FitH"
  }
}).embed("pdfRenderer");
用户回答回答于

它不打印整个PDF的原因是因为它在iframe中并且高度是固定的。为了打印整个PDF,需要iframe高度以匹配其内容高度(iframe上不应该有滚动条)。

另一种选择是仅打印iframe。将id添加到iFrame中:

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

关注iframe并打印其内容:

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

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

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励