Question

我有一个按钮，可以将报告加载到div中的“隐形”iframe中并打印出iframe;用户按下按钮以打印报告（包含在不同的页面上）而不更改页面或除打印对话框之外的任何视觉中断。它适用于Chrome和Firefox，但不适用于IE。在IE中，父页面完整打印，并在页面底部插入一个微小的混乱iframe（我正在加载iframe）。

这是没有内容的空div，它就在那里我有一个ID标记的地方风格和坚持Javascript的内容：

<div id="printerDiv"></div>

这是javascript函数，onClick我的按钮这个函数触发并将我的打印页面插入到printerDiv内的iframe中，加载此页面后打印出来：

function printPage(url) {
    var div = document.getElementById("printerDiv");
    div.innerHTML = '<iframe src="'+url+'" onload=this.contentWindow.print();>
        </iframe>';
 }

这是隐藏div的CSS。我正在使用绝对定位将其从可见屏幕区域移开。我过去常常使用display：none，但是Firefox无法以这种方式打印iframe：

#printerDiv{
    position:absolute;
    left:-9999px;
}

当我在IE中打印它打印整页，然后在底部，#printerDiv，我得到这个小iframe： enter image description here

所以正在加载内容，但它不仅仅打印iframe，而且它也没有正确隐藏iframe。我在#printerDiv中插入的任何其他内容都已正确隐藏，只有iframe显示为此类。

我在我的Javascript函数中尝试了this question中的所有解决方案：使用self.prin t，使用document.parentWindow.print，将printerDiv上的样式更改为0px高度/宽度不起作用无论是。

我很欢迎不使用iframe的解决方案（IE似乎有很多问题）但我需要这种能力来加载屏幕上看不到的内容并通过按钮直接打印。

Answer 1

在我的情况下，解决方案是不隐藏我想要打印的iframe。如果我隐藏它（使用display：none; visibility：hidden等），父页面将始终打印。

而不是实际隐藏框架，我只是将其设为10x10并且无边框。现在这可行（使用延迟技巧）。

示例代码：

    <script type="text/javascript">
    function printFrame(frameId, targetContent)
    {
        var doc = $('#'+frameId).get(0).contentWindow.document;
        var $body = $('body',doc);

        $body.html($('#'+targetContent).html());

        setTimeout(function(){
            $('#'+frameId).get(0).contentWindow.focus();
            $('#'+frameId).get(0).contentWindow.print();            
        }, 1000);        
    }
</script>

HTML：

<div id="contentToPrint">
I just want to print this stuff
</div>
<iframe src="about:blank" id="printframe" style="border:0" width="10" height="10"></iframe>

要打印的按钮：

<a href="javascript:printFrame('printframe','contentToPrint')">Print frame</a>

Answer 2

`<script>

function framePrint(whichFrame) {

parent[whichFrame].focus();

parent[whichFrame].print();

}

</script>`

<a href="javascript:framePrint('FRAMENAME');">Print</a>

将FRAMENAME更改为您要打印的帧的名称。

Answer 3

我最近在IE10上遇到了同样的问题，添加了超时并获得了我想要的结果，iFrame打印出来而不是父页面：

<script type="text/javascript">
function selfPrint(){
    self.focus();
    self.print();
}
setTimeout('selfPrint()',2000);
</script>

Answer 4

我和IE11有同样的问题。似乎IE忽略了.focus（）调用，而是打印父页面和iframe。我的解决方案是注入一个样式标签，在打印之前隐藏除iframe之外的所有内容，然后在调用print之后删除样式。我的代码在http://ironlasso.com/print-only-lightbox-or-modal-window-content/

Answer 5

你可以尝试这样的事情：

使用jQuery .load()之类的内容将报告放入#printerDiv并将其与CSS区分开来

你的CSS

#printerDiv{display:none;}
@media print{
    body *{display:none;}
    #printerDiv{display:block;height:100%;width:100%}
}

和打印按钮javascript

$('#printerDiv').empty().load(url, function(){
        window.print();
    }); //or whatever library/pure js you like

在IE中打印iframe

5 个答案: