Javascript 打印多个网页 iFrame 内容（打印所有按钮）
[英]Javascript Print Multiple Webpages iFrame Content (Print All Button)
问题描述
使用 JavaScript，如何创建打印全部按钮？
每当单击“全部打印”按钮时，都会遍历 iFrame 的不同 src 并打印内容。
请注意，iFrame 当前设置在主网页上。 有导航按钮可以更改 iFrame 的内容 src。 此主网页的设置类似于使用导航按钮浏览幻灯片内容。 导航按钮实际上是导航到不同的网页。
因此，我猜测内容需要附加到文档或排列，以便可以使用“全部打印”按钮一次性打印所有内容。
我使用以下代码成功打印了“当前幻灯片”（或 iFrame 内容）：
function PrintCurrentSlide()
{
var el = document.getElementById('ifMain');
el.contentWindow.focus();
el.contentWindow.print();
return;
}
现在，我正在寻找一个答案，只需单击一下即可浏览 iFrame src 以打印内容。
2 个解决方案
解决方案1
1 2015-02-04 07:23:59
在你的脚本中试试这个
window.onload=function() {
window.frames["printf"].focus();
window.frames["printf"].print();
}
function print() {
var newWin = window.frames['printf'];
newWin.document.write('<body onload=window.print()>This is a new page I inserted</body>');
newWin.document.close();
}
function change(){
var url="http://www.apple.com/";
var $iframe = $('#ifrm');
if ( $iframe.length ) {
$iframe.attr('src',url);
return false;
}
return true;
}
并在 HTML 中
<input type="button" onclick="print()" value="Test print"/>
<button onclick="change()">next</button>
<iframe id="printf" name="printf" src="dfgdf.html"></iframe>
在这里动态放置您的页面并打印。 使用您的逻辑自动或单击或其他方式打印
解决方案2
0 2020-05-31 22:56:43
我想出了一个办法来解决它。 有了这个，你只能得到一个打印对话框。
目的是通过使用 javascript 操作 DOM 将所有 iframe 的内容获取到父窗口中。 这是代码：
<script>
pages =[] // initiate an empty list here
function printPage() {
var frames = document.getElementsByTagName('iframe');
// get all the iframes and loop over them
// then push their innerHTML into the list
for (var i = 0; i < frames.length; i++){
pages.push(frames[i].contentWindow.document.body.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 iframes innerHTML
window.content.document.body.innerHTML = pages;
// then we print this new window that contains all the iframes
window.print();
}
else {
// do nothing
}
}
使用此解决方案，您甚至可以避免 iframe 超过一页时被截断的问题。
请记住，在您的父页面 HTML 中，您将使用以下代码来调用 printPage 函数。
<input type="submit" value="Print All"
onclick="javascript:printPage()"
/>
如何使用iframe和CSS打印网页
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.