Javascript 仅打印 iframe 内容答案

【问题标题】：Javascript Print iframe contents onlyJavascript 仅打印 iframe 内容
【发布时间】：2012-03-25 20:43:00
【问题描述】：

这是我的代码

<script>
var body = "dddddd"    
var script = "<script>window.print();</scr'+'ipt>";

var newWin = $("#printf")[0].contentWindow.document; 
newWin.open();
newWin.close();

$("body",newWin).append(body+script);

</script>
<iframe id="printf"></iframe>

这可行，但它打印父页面，我如何让它只打印 iframe？

【问题讨论】：

父页面和框架页面是否在同一个域中？
是的，实际上 iframe 是空的，我正在向它写入内容

标签： javascript jquery printing

【解决方案1】：

我不希望它起作用

尝试一下

window.frames["printf"].focus();
window.frames["printf"].print();

并使用

<iframe id="printf" name="printf"></iframe>

或者试试老好人

var newWin = window.frames["printf"];
newWin.document.write('<body onload="window.print()">dddd</body>');
newWin.document.close();

如果 jQuery 无法破解它

Live Demo

【讨论】：

我使用的是 jQuery，我通过 Dom 对象找到了相同的方法。即var iframe = $('#printf')[0]; iframe.contentWindow.focus(); iframe.contentWindow.print(); 这在 IE 9 或更低版本中有效吗？
截至 2014 年 1 月 22 日，这在 Chrome 中不起作用，无论您添加 contentWindow 还是调用 window.frames["printf"].print()。它打印整个页面，而不仅仅是框架。
我的建议都对我有用 plungjan.name/SO/testprintiframe.html 在 XP 上的 Chrome 32.0.1700.76 m 上。
@Gullbyrd 我和你有同样的问题，这段代码有效：var PDF = document.getElementById('fileframe'); PDF.focus(); PDF.contentWindow.print(); 来自：sitepoint.com/load-pdf-iframe-call-print
这在加载带有 pdf 数据的 iframe 时不起作用，例如 <iframe src="data:application/pdf;base64,JVBERi0..."></iframe> 它会给出 CORS 错误，即使该框架甚至没有加载外部 URL。有谁知道如何解决这个问题？

【解决方案2】：

document.getElementById("printf").contentWindow.print();

Same origin policy 适用。

【讨论】：

@HeemanshuBhalla 您的 iframe 未加载到页面中，或者您在 document.getElementById 上使用了不正确的 ID。确保在尝试打印之前可以获得对 iframe 的有效引用。

【解决方案3】：

简单的方法（在 ie7+、firefox、Chrome、safari 上测试）就是这样

//id is the  id of the iframe
function printFrame(id) {
            var frm = document.getElementById(id).contentWindow;
            frm.focus();// focus on contentWindow is needed on some ie versions
            frm.print();
            return false;
}

【讨论】：

这仅适用于我的 Chrome。我很确定它会起作用！

【解决方案4】：

另一种选择，可能合适也可能不合适，但如果合适，则更简洁：

如果您总是只想从页面打印 iframe，您可以使用单独的“@media print{}”样式表来隐藏 iframe 之外的所有内容。然后就可以正常打印页面了。

【讨论】：

其实很聪明+1

【解决方案5】：

你可以使用这个命令：

document.getElementById('iframeid').contentWindow.print();

该命令与window.print()基本相同，但由于我们要打印的窗口在iframe中，我们首先需要获取该窗口的一个实例作为javascript对象。

所以，对于那个 iframe，我们首先通过它的 id 获取 iframe，然后它的 contentWindow 返回一个 window(DOM) 对象。所以，我们可以直接在这个对象上使用 window.print() 函数。

【讨论】：

嗨，欢迎来到 Stackoverflow。请在您的回答中添加一些详细信息或take a look at here。
虽然这个代码块可能会回答这个问题，但如果你能提供一些解释为什么会这样，那将是一个更好的答案。

【解决方案6】：

我在 IE8 中遇到了上述所有解决方案的问题，找到了一个在 IE 8+9、Chrome、Safari 和 Firefox 中测试的不错的解决方法。对于我的情况，我需要打印一份动态生成的报告：

// create content of iframe
var content = '<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">'+
'<head><link href="/css/print.css" media="all" rel="stylesheet" type="text/css"></head>'+
'<body>(rest of body content)'+
'<script type="text/javascript">function printPage() { window.focus(); window.print();return; }</script>'+
'</body></html>';

注意正文关闭标记之前的 printPage() javascript 方法。

接下来创建 iframe 并将其附加到父正文，以便其 contentWindow 可用：

var newIframe = document.createElement('iframe');
newIframe.width = '0';
newIframe.height = '0';
newIframe.src = 'about:blank';
document.body.appendChild(newIframe);

接下来设置内容：

newIframe.contentWindow.contents = content;
newIframe.src = 'javascript:window["contents"]';

这里我们将动态内容变量设置为 iframe 的窗口对象，然后通过 javascript: 方案调用它。

终于打印出来了；聚焦 iframe 并在 iframe 内容中调用 javascript printPage() 函数：

newIframe.focus();
setTimeout(function() {
  newIframe.contentWindow.printPage();
}, 200);
return;

不一定需要 setTimeout，但是如果您要加载大量内容，我发现 Chrome 偶尔会在没有它的情况下无法打印，因此建议执行此步骤。另一种方法是包装 'newIframe.contentWindow.printPage();'在 try catch 中，将 setTimeout 包装的版本放在 catch 块中。

希望这对某人有所帮助，因为我花了很多时间寻找在多个浏览器中运行良好的解决方案。感谢SpareCycles。

编辑：

不要使用 setTimeout 来调用 printPage 函数，而是使用以下代码：

newIframe.onload = function() {
    newIframe.contentWindow.printPage();
}

【讨论】：

我真的认为这会奏效。但它不适用于我的任何浏览器。 :(
对我来说很好用，有什么可以帮忙的吗？将您的代码发布/发送给我，然后查看，或查看我在哪里使用它的示例：DIYInvestor 浏览比较页面 1，它已在结果表上方的打印图标上成功实现。跨度>
@user158017，请检查我上面的编辑 - 这有帮助吗？我知道已经过去了很长时间..

【解决方案7】：

这个时候，iframe里面就不需要script标签了。这对我有用（在 Chrome、Firefox、IE11 和 node-webkit 0.12 中测试）：

<script>
window.onload = function() {
    var body = 'dddddd';
    var newWin = document.getElementById('printf').contentWindow;
    newWin.document.write(body);
    newWin.document.close(); //important!
    newWin.focus(); //IE fix
    newWin.print();
}
</script>

<iframe id="printf"></iframe>

感谢所有答案，拯救我的一天。

【讨论】：

如果 iframe 不在同一个域上，则无法工作，跨域 SecurityError

【解决方案8】：

如果您使用 javascript document.write() 设置 IFrame 的内容，那么您必须通过 newWin.document.close(); 关闭文档，否则以下代码将不起作用，打印将打印整个页面的内容，而不仅仅是 IFrame 内容。

var frm = document.getElementById(id).contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();

【讨论】：

【解决方案9】：

我一直试图在打字稿中实现这一点，以上所有方法都行不通。为了让 typescript 能够访问 contentWindow，我必须先转换元素。

let iframe = document.getElementById('frameId') as HTMLIFrameElement;
iframe.contentWindow.print();

【讨论】：

【解决方案10】：

将此代码用于 IE9 及更高版本：

window.frames["printf"].focus();
window.frames["printf"].print();

对于 IE8：

window.frames[0].focus();
window.frames[0].print();

【讨论】：

【解决方案11】：

我想知道您进行 iframe 打印的目的是什么。

我刚才遇到了一个类似的问题：使用chrome的打印预览生成一个iframe的PDF文件。

最后我用一个技巧解决了我的问题：

$('#print').click(function() {
    $('#noniframe').hide(); // hide other elements
    window.print();         // now, only the iframe left
    $('#noniframe').show(); // show other elements again.
});

【讨论】：