打印整个 HTML 页面，包括 iframe 内的 pdf 文件
[英]Print whole HTML page including pdf file inside iframe
问题描述
I've got an assignment to embed relatively small pdf file inside html page and print the entire html pade including the pdf file inside the iframe.
我有一个任务是在 html 页面中嵌入相对较小的 pdf 文件，并打印整个 html pade，包括 iframe 中的 pdf 文件。 Here is the structure of my html page:这是我的 html 页面的结构：
Here is my code:这是我的代码：
@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>
Currently I'm printing the page using css @media query.目前我正在使用 css @media 查询打印页面。 But unfortunately this media query prints the pdf's first page only .但不幸的是，此媒体查询仅打印 pdf 的第一页。
What can I do print the entire pdf file?我可以做什么打印整个 pdf 文件？
5 个解决方案
解决方案1
11 2016-04-17 09:59:33
The reason it's not printing the whole PDF is because it's in an iframe and the height is fixed.它不打印整个 PDF 的原因是因为它在 iframe 中并且高度是固定的。 In order to print the whole PDF you'll need the iframe height to match its content height ( there should be no scrollbar on the iframe ).为了打印整个 PDF，您需要 iframe 高度以匹配其内容高度（ iframe 上不应有滚动条）。
Another option is to print only the iframe.另一种选择是仅打印 iframe。 Add id to your iFrame:将 id 添加到您的 iFrame：
<iframe id="toPrint" class="toPrint"></iframe>
Focus the iframe and print its content:聚焦 iframe 并打印其内容：
var pdfFrame = document.getElementById("toPrint").contentWindow;
pdfFrame.focus();
pdfFrame.print();
解决方案2
5 2016-04-13 18:29:29
Try this, it includes some JS but thats always good.试试这个，它包含一些 JS 但这总是好的。 HTML: 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: 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");
This should work.这应该有效。 Let me now if i doesnt如果我没有，现在让我
解决方案3
1 2016-04-13 18:59:32
如果你可以使用一个对象标签，那么这篇文章： http ： //forums.asp.net/t/1926965.aspx？how + to + print + sombedded + PDF + file + using +javascript+which +works + in+所有+浏览器+可能对您有用。
解决方案4
1 2016-04-18 09:44:02
Use https://github.com/itext/itextsharp itextsharp or https://github.com/MrRio/jsPDF jsPDF.使用https://github.com/itext/itextsharp itextsharp 或https://github.com/MrRio/jsPDF jsPDF。 It is easy to use by plugin通过插件很容易使用
解决方案5
0 已采纳 2016-04-24 14:20:54
I used Mozilla's pdf.js to solve my problem.我使用 Mozilla 的 pdf.js 来解决我的问题。 It renders the pdf file on html5 canvas thus it allows to print the whole html page as required.它在 html5 画布上呈现 pdf 文件，因此它允许根据需要打印整个 html 页面。
Here is the code ( 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>
解决方案6
0 2020-06-01 21:17:14
Here is a simpler solution using javascript.这是使用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>
With this solution avoid the problem of the iframe being cut off if it exceeds one page.使用此解决方案可避免 iframe 超过一页时被截断的问题。 Secondly, you get only one print dialogue box even if you have multiple iframes.其次，即使您有多个 iframe，您也只能得到一个打印对话框。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.