打印整个HTML页面，包括iframe内的pdf文件
打印整个HTML页面，包括iframe内的pdf文件
提问于 2016-04-11 22:11:18
我的任务是在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 query打印页面。但不幸的是，这个媒体查询只打印pdf的第一页。
我能做什么打印整个pdf文件？
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-04-24 22:20:55
我用Mozilla的pdf.js解决了我的问题。它将pdf文件呈现在html5画布上，因此可以根据需要打印整个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>
Stack Overflow用户
发布于 2016-04-17 17:59:33
它没有打印整个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();Stack Overflow用户
发布于 2016-04-14 02:29:29
试试这个，它包含了一些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");这应该是可行的。如果我没有，现在就让我来吧
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36551150
复制相关文章
相似问题