window.frames [“printElem”]。print()给出一个空的预览

时间:2017-01-11 00:35:27

标签: javascript angularjs iframe

我正在使用的angularjs指令

function printDiv() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function(evt) {
                evt.preventDefault();
                PrintElem(attrs.printDiv);
            });

            function PrintElem(elem) {
                PrintWithIframe($(elem).html());
            }

            function PrintWithIframe(data) {
                if ($('iframe#printf').size() == 0) {
                    $('html').append('<iframe id="printf" name="printf"></iframe>');     
                    var mywindow = window.frames["printf"];
                    mywindow.document.write('<html><head><link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"><link href="css/style.css" rel="stylesheet" type="text/css"></head><body>'
                        + data +
                        '</body></html>');

                    $(mywindow.document).ready(function() {
                        mywindow.print();

                        // $('iframe#printf').remove();
                    });
                } else {
                    window.frames["printf"].print();
                }

                return true;
            }
        }
    };
}

如果删除外部css样式链接,mywindow.print()可以正常工作。使用这些css样式链接,我第一次调用printDiv时,它总是显示一个空的预览,如果我打印出它也是空的,但我可以在底部看到创建的iframe页面,它不是空的。如果我第二次调用该函数,它将打印正确的预览。我用Google搜索并发现someone建议:

setTimeout(function() {
    mywindow.print();
}, 1000);

但我发现print()里面的setTimeout从未被调用过。 知道如何在第一时间进行打印工作吗?感谢。

更新:用document.write替换document.body.innerHTML后,预览不再为空,但外部css样式从未应用于预览,但我可以看到iframe中的样式是正确的。我在Firefox和Chrome上试过这个。

$('html').append('<iframe id="printf" name="printf"></iframe>');

window.frames["printf"].document.body.innerHTML='<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"><link href="css/style.css" rel="stylesheet" type="text/css">' + $(attrs.printDiv).html();
$(window.frames["printf"].document).ready(function() {
    window.frames["printf"].window.focus();
    window.frames["printf"].window.print();

    // $('iframe#printf').remove();
});

0 个答案:

没有答案