打印整个 HTML 页面，包括 iframe 中的 pdf 文件答案

【问题标题】：Print whole HTML page including pdf file inside iframe打印整个 HTML 页面，包括 iframe 中的 pdf 文件
【发布时间】：2016-08-01 18:14:33
【问题描述】：

我的任务是在 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 文件？

【问题讨论】：

标签： javascript html css pdf iframe

【解决方案1】：

这是一个使用 javascript 的更简单的解决方案。

<body>
        <h3 id='first_h3'>MUST BE PRINTED</h3>
        <p id ='first_paragraph'> MUST BE PRINTED</p>
        <div id="pdfRenderer"></div>
        <h3 id='second_h3'>MUST BE PRINTED</h3>
        <p id='second_paragraph'> MUST BE PRINTED</p>

<input type="submit" value="Print All"
  onclick="javascript:printPage()"
 />

</body>

<script>

 pages =[] // initiate an empty list here

function printPage() {

var first_h3 = document.getElementById('first_h3');
// get the first h3 tag and
// then push its innerHTML into the list
   pages.push(first_h3.innerHTML); 

var first_paragraph = document.getElementById('first_paragraph');
// get the first paragraph and
// then push its innerHTML into the list
   pages.push(first_paragraph.innerHTML); 

var pdfRenderer = document.getElementById('pdfRenderer');
// get the pdfRenderer and
// then push its innerHTML into the list
   pages.push(pdfRenderer.contentWindow.document.body.innerHTML); 

var second_h3 = document.getElementById('second_h3');
// get the second h3 tag and
// then push its innerHTML into the list
   pages.push(second_h3.innerHTML); 

var second_paragraph = document.getElementById('second_paragraph');
// get the second paragraph and
// then push its innerHTML into the list
   pages.push(second_paragraph.innerHTML); 

if (pages && pages.length) {

// this if statement, just checks to ensure our list is not empty before running the code.

// here is the magic, we now set the parent window to be equal to all the concatenated innerHTML
window.content.document.body.innerHTML = pages;
// then we print this new window that contains all the different parts in the exact order we pushed them into the list.
window.print();
} 
else {
// do nothing
}


}
</script>

使用此解决方案可避免 iframe 超过一页时被切断的问题。其次，即使您有多个 iframe，您也只会得到一个打印对话框。

【讨论】：

【解决方案2】：

我使用 Mozilla 的 pdf.js 来解决我的问题。它在 html5 画布上呈现 pdf 文件，因此它允许根据需要打印整个 html 页面。

这里是代码（credit）：

<html>
<body>

<script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script type="text/javascript">
function renderPDF(url, canvasContainer, options) {
    var options = options || { scale: 1 };
        
    function renderPage(page) {
        var viewport = page.getViewport(options.scale);
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };
        
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        canvasContainer.appendChild(canvas);
        
        page.render(renderContext);
    }
    
    function renderPages(pdfDoc) {
        for(var num = 1; num <= pdfDoc.numPages; num++)
            pdfDoc.getPage(num).then(renderPage);
    }
    PDFJS.disableWorker = true;
    PDFJS.getDocument(url).then(renderPages);
}   
</script> 
        <h3>MUST BE PRINTED</h3>
        <p> MUST BE PRINTED</p>
		<div id="holder"></div>
        <h3>MUST BE PRINTED</h3>
        <p> MUST BE PRINTED</p>

<script type="text/javascript">
renderPDF('yourFile.pdf', document.getElementById('holder'));
</script>  

</body>
</html>

【讨论】：

【解决方案3】：

使用https://github.com/itext/itextsharpitextsharp 或https://github.com/MrRio/jsPDFjsPDF。通过插件很容易使用

【讨论】：

【解决方案4】：

它没有打印整个 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();

【讨论】：

【解决方案5】：

试试这个，它包含一些 JS，但那总是好的。 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");

这应该可行。如果我没有，现在让我来

【讨论】：

嗨，@Rik。我已经尝试过你的建议。此外，我使用pdfobject.com 文档使事情更清楚，但问题仍然存在，我无法打印整个页面，包括#pdfRenderer div 中的 pdf 文件。
为什么要在为 PDF 制作的 div 中打印 HTML？
嗨，@Rik。我有一个带有标准页眉和页脚的文档。在这两者之间，我需要注入自定义 pdf 许可协议。因此我需要能够打印标准文档。页眉和页脚之间带有自定义 pdf。我的客户必须打印协议才能签署。