在IE中打印iframe

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:

所以正在加载内容,但它不是只打印iframe,而且它也没有正确隐藏iframe.我插入的任何其他内容#printerDiv都被正确隐藏,只有iframe显示如此.

我已经在我的Javascript函数中尝试了这个问题中的所有解决方案:使用self.print,使用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

你可以尝试这样的事情：

使用 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