在应用文档样式之前调用window.print

Call to window.print firing before documents style is applied

本文关键字：调用 window print 样式 应用 应用文 文档      更新时间：2023-09-26

我有一个带有打印功能的表单。在函数中，我打开一个窗口，构建文档，添加带有样式表的头，添加表单HTML，并调用打印正文的最后部分。问题是初始打印预览/打印没有反映样式。如果我取消打印并尝试手动打印，样式就会显示出来。我尝试了很多方法，但都没有成功。这似乎是个时间问题。有什么想法吗？

浏览器是Chrome浏览器。下面是JS函数。（这是通过面上下文注入的）。

function printForm(windowTitle, path){
    var printWindow = window.open();
    var printDocument = printWindow.document;
    var headHtml = "<link href='" + path + "/css/style.css' rel='stylesheet' type='text/css'/>";
    printDocument.getElementsByTagName('head')[0].innerHTML = headHtml;
    var printDiv = printDocument.createElement("DIV");
    var formDiv = document.getElementById("formDiv");
    printDiv.innerHTML = formDiv.innerHTML // Styling here is the issue
    printDocument.body.appendChild(printDiv);
    var scriptTag = printDocument.createElement("script");
    var script = printDocument.createTextNode("print();");
    scriptTag.appendChild(script);
    printDocument.body.appendChild(scriptTag);
}

我认为您需要一个setTimeout来延迟打印一两秒钟，以便应用样式。你需要修修补补才能找到合适的长度。

与其尝试用计时器进行猜测，不如在<link ...>上使用load事件来准确地知道它何时完成加载。

下面是我使用的一个函数，它说明了这种技术。它使用屏幕外<iframe>来打印页面的一部分。它是基于jQuery的，但原理在普通JS中是一样的。请注意<link>'s onload函数与匿名函数的设置，该函数调用<iframe>'s窗口对象上的print()。

/*
 * expects:
 *   <tag id="whatever">...goop...</tag>
 *   <input type="button" class="printit" data-target="whatever" value="Print">
 */
$(function() {
        $( '.printit' ).click(function() {
                var goop = $( '#' + this.dataset.target ).prop('outerHTML');
                var ifr = $('<iframe>');
                var bas = $('<base href="' + document.baseURI + '">');
                var lnk = $('<link rel="stylesheet" href="/css/print.css">');
                lnk.on('load', function() {                     /* CSS is ready! */
                        ifr[0].contentWindow.print();
                });
                ifr.css( { position: 'absolute', top: '-10000px' } )
                   .appendTo('body')
                   .contents().find('body').append(goop);
                ifr.contents().find('head').append(bas).append(lnk);
                return false;
        });
});
相关文章：