Javascript仅打印iframe内容

Question

这是我的代码

<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？

Answer 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不能破解它

现场演示

Answer 2

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

同源政策适用。

Answer 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;
}

Answer 4

替代选项，可能适用也可能不适合，但如果是：

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

Answer 5

您可以使用此命令：

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

这个命令基本上与window.print（）相同，但是我们想要打印的窗口在iframe中，我们首先需要获取该窗口的实例作为javascript对象。

因此，在参考iframe时，我们首先使用它的id获取iframe，然后它的contentWindow返回一个窗口（DOM）对象。 因此，我们可以直接在此对象上使用window.print（）函数。

Answer 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>';

请注意body关闭标记之前的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：scheme调用它。

最后打印; 关注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();
}

Answer 7

目前，iframe中不需要脚本标记。 这对我有用（在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>

感谢所有答案，保存我的一天。

Answer 8

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

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

Answer 9

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

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

对于IE8：

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

Answer 10

我被困在尝试在打字稿中实现这一点，以上所有都无法正常工作。 我必须首先强制转换元素，以便typescript可以访问contentWindow。

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

Answer 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. });

Javascript仅打印iframe内容

问题描述

11 个解决方案

解决方案1
110 已采纳 2012-03-08 11:09:59

解决方案2
16 2012-03-08 12:19:04

解决方案3
11 2013-01-15 01:27:10

解决方案4
9 2012-03-08 12:11:04

解决方案5
7 2015-02-20 05:54:47

解决方案6
4 2013-10-03 09:32:14

解决方案7
3 2015-04-24 00:54:56

解决方案8
0 2014-09-15 03:58:38

解决方案9
0 2015-07-02 07:20:55

解决方案10
0 2019-07-09 18:48:02

解决方案11
-1 2015-04-29 13:36:59

Javascript仅打印iframe内容

问题描述

11 个解决方案

解决方案1 110 已采纳 2012-03-08 11:09:59

解决方案2 16 2012-03-08 12:19:04

解决方案3 11 2013-01-15 01:27:10

解决方案4 9 2012-03-08 12:11:04

解决方案5 7 2015-02-20 05:54:47

解决方案6 4 2013-10-03 09:32:14

解决方案7 3 2015-04-24 00:54:56

解决方案8 0 2014-09-15 03:58:38

解决方案9 0 2015-07-02 07:20:55

解决方案10 0 2019-07-09 18:48:02

解决方案11 -1 2015-04-29 13:36:59

解决方案1
110 已采纳 2012-03-08 11:09:59

解决方案2
16 2012-03-08 12:19:04

解决方案3
11 2013-01-15 01:27:10

解决方案4
9 2012-03-08 12:11:04

解决方案5
7 2015-02-20 05:54:47

解决方案6
4 2013-10-03 09:32:14

解决方案7
3 2015-04-24 00:54:56

解决方案8
0 2014-09-15 03:58:38

解决方案9
0 2015-07-02 07:20:55

解决方案10
0 2019-07-09 18:48:02

解决方案11
-1 2015-04-29 13:36:59