Javascript 打印整个HTML页面，包括iframe中的pdf文件
我的任务是在html页面中嵌入相对较小的pdf文件，并在iframe中打印整个html pade，包括pdf文件。 以下是我的html页面的结构： 这是我的密码：Javascript 打印整个HTML页面，包括iframe中的pdf文件,javascript,html,css,pdf,iframe,Javascript,Html,Css,Pdf,Iframe,我的任务是在html页面中嵌入相对较小的pdf文件，并在iframe中打印整个html pade，包括pdf文件。 以下是我的html页面的结构： 这是我的密码： @媒体打印{ body*{display:block；} .toPrint{显示：块；边框：0；宽度：100%；最小高度：500px} 印刷品 必须打印 必须打印 必须打印 必须打印 试试这个，它包含一些JS，但这总是好的。 HTML: 这应该行得通。如果我不打印整个PDF，那么现在让我来看看。它不打印整个PDF的原因是因为它位于
@媒体打印{
body*{display:block；}
.toPrint{显示：块；边框：0；宽度：100%；最小高度：500px}
印刷品
必须打印
必须打印
必须打印
必须打印
这应该行得通。如果我不打印整个PDF，那么现在让我来看看。它不打印整个PDF的原因是因为它位于iframe中，并且高度是固定的。为了打印整个PDF，您需要iframe的高度与其内容高度相匹配（iframe上应该没有滚动条） 另一个选项是仅打印iframe。将id添加到iframe：
<iframe id="toPrint" class="toPrint"></iframe>
使用itextsharp或jsPDF。它很容易通过插件使用我使用Mozilla的pdf.js来解决我的问题。 它在html5画布上呈现pdf文件，因此可以根据需要打印整个html页面 下面是代码（）：
函数renderPDF（url、canvasContainer、选项）{
var options=options | |{scale:1}；
函数呈现页面（第页）{
var viewport=page.getViewport（options.scale）；
var canvas=document.createElement（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var renderContext={
画布背景：ctx，
视口：视口
};
canvas.height=viewport.height；
canvas.width=viewport.width；
canvasContainer.appendChild（canvas）；
page.render（renderContext）；
}
函数渲染页（pdfDoc）{
对于（var num=1；num，这里有一个使用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>
必须打印
必须打印
必须打印
必须打印第二段
pages=[]//在此处启动空列表
函数printPage（）{
var first_h3=document.getElementById（'first_h3'）；
//获取第一个h3标签，然后
//然后将其内部HTML推送到列表中
pages.push（first_h3.innerHTML）；
var first_段落=document.getElementById（“first_段落”）；
//获取第一段并
//然后将其内部HTML推送到列表中
pages.push（第一段为innerHTML）；
var pdfRenderer=document.getElementById（'pdfRenderer'）；
//把pdfRenderer和
//然后将其内部HTML推送到列表中
push（pdfRenderer.contentWindow.document.body.innerHTML）；
var second_h3=document.getElementById（'second_h3'）；
//获取第二个h3标签并
//然后将其内部HTML推送到列表中
pages.push（second_h3.innerHTML）；
var second_段落=document.getElementById（'second_段落'）；
//获取第二段并
//然后将其内部HTML推送到列表中
pages.push（第二段.innerHTML）；
如果（页数和页数长度）{
//这个if语句，只是在运行代码之前检查以确保我们的列表不是空的。
//这里是魔术，我们现在设置父窗口等于所有连接的innerHTML
window.content.document.body.innerHTML=页面；
//然后我们打印这个新窗口，它包含所有不同的部分，按照我们将它们放入列表的确切顺序。
window.print（）；
}
否则{
//无所事事
}
}
使用此解决方案可以避免iframe超过一页时被切断的问题。其次，即使有多个iframe，也只能得到一个打印对话框。Hi，@Rik。我已经尝试了您的建议。我还使用了文档来让事情更清楚，但问题仍然存在，我无法打印整个页面，包括t他在#pdfRenderer div中创建了pdf文件。为什么要在为pdf制作的div中打印HTML？嗨，@Rik。我有一个带有标准页眉和页脚的文档。在这两个文档之间，我需要插入一个自定义pdf许可协议。因此，我需要能够打印带有自定义pdf的标准文档页眉和页脚。我的客户必须打印同意签字。
<iframe id="toPrint" class="toPrint"></iframe>
var pdfFrame = document.getElementById("toPrint").contentWindow;
pdfFrame.focus();
pdfFrame.print();
<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>