在动态创建的iframe中加载页面（不在dom中）并打印

Question

我正在尝试在javascript中创建打印功能，它会创建iframe，设置源并等待dom准备打印iframe的内容，但无法正常工作。

这是我的功能：

app.addReportPrintButtons = function (parentElement) {
    var parent = parentElement || "body";

    $(parent).on("click", ".print-report", function (e) {
        var url = $(this).attr('href');

        var iframe = document.createElement("IFRAME");
        iframe.setAttribute("src", url);
        iframe.onload = function (e) {
            var win = iframe.contentWindow || iframe;
            win.focus();
            win.print();
        };

        e.preventDefault();
    });
};

我可以在动态创建的iframe中打印页面吗？ 还是需要将iframe附加到DOM？

Answer 1

Javascript无法直接打印。 它只能触发浏览器的打印功能。 因此，如果您的元素不在DOM中，则无法打印该元素。 在上面的代码中，iframe无法打印，因为在插入DOM中之前，iframe在技术上并未加载。

我建议使用CSS通过以下方式隐藏iframe：

iframe {
    display: none;
}

将其放在常规屏幕样式表中。 然后在您的打印样式表中，显示iframe：

iframe {
    display: block;
}