Question

我有一个带打印功能的表单。在函数内部，我打开一个窗口，构建文档，添加样式表头，添加表单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);

}

Answer 1

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

Answer 2

使用load上的<link ...>事件来确切知道何时完成加载，而不是尝试使用计时器进行猜测。

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

/*
 * 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;
        });
});

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

2 个答案: