Question

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

Answer 1

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

Answer 2

试试这个，它包括一些JS，但总是很好。 HTML：

recode_dt <- function(datacol, oldval, newval) 
    { trans <- setNames(newval, oldval)
     trans[ datacol ]   }

dt[, (bincols) := lapply(.SD, recode_dt, oldval = c("u", "n", "y"), 
                                         newval = c(NA_real_, 0, 1)), 
     .SDcols = bincols]
dt
#===============
   id     fruit     mydate eaten present sex
1:  1     apple 2015-09-01     1       0   m
2:  2    orange 2015-09-02     1       0   f
3:  3    banana 2015-11-15     0       1   f
4:  4 strawbery 2016-02-24     1       1   m
5:  5  rasberry 2016-03-08    NA       1   f

JS：

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

这应该有效。现在让我，如果我没有

Answer 3

如果您可以使用对象标记，那么本文：http://forums.asp.net/t/1926965.aspx?how+to+print+embedded+PDF+file+using+javascript+which+works+in+all+browsers+可能对您有用。

Answer 4

使用https://github.com/itext/itextsharp itextsharp或https://github.com/MrRio/jsPDF jsPDF。它易于使用插件

Answer 5

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

以下是代码（credit）：

＆＃13;

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

＆＃13;

Answer 6

这是使用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，您也只会得到一个打印对话框。

在iframe中打印整个HTML页面，包括pdf文件

6 个答案: