在動態創建的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;
}