javascript - 延迟 window.print() 直到页面在 ajax 请求中加载以避免空白打印屏幕？

Question

我试图用这段代码做的是向生成条形码并返回它们以供打印的东西发出 ajax 请求。当我发出请求时，它会正确生成所有内容，但打印窗口是空白的。如果我取消打印窗口，则底层窗口具有要打印的正确条码。我怀疑我需要延迟 .print() 直到子窗口完全加载，但解决方案让我望而却步。在此先感谢您的帮助!

var barcode = $.ajax({
     url: "barcode.php",
     method: "POST",
     data: {
            name : name,
            text : text,
            number : numLines
            },
});
var printText;
barcode.done(function( jqXHR, textStatus ) {
    printText = jqXHR;
    var WindowObject = window.open();
    WindowObject.document.writeln(printText);
    WindowObject.focus();
    WindowObject.print();

});

这一切都包含在 $( document ).ready(function(){});

Answer 1

经过大量研究后，我找到了两个答案:一个可能在约定方面更好，另一个更容易实现，但(遗憾的是)也很老套。

对于第一个解决方案，它只是简化了第二个解决方案。只需向 window.open 提供一个 url ，这将生成一个包含内容的页面和一个在加载所有内容时调用 window.print 的脚本。这应该很容易，因为您似乎在此处托管页面，因此您只需让“barcode.php”接受 GET 参数，您需要做的就是向页面添加打印功能。

// Assumes parameters provided are safe to use in a url.
window.open('barcode.php?name=' + name + '&text=' + text + '&number=' + number');

然后，在“barcode.php”返回的内容中，添加一段脚本:

document.onload = function() {
    window.focus();
    window.print();
    window.close();
};

这比我能想到的任何其他解决方案都要好得多，尤其是因为您应该(我没有测试过，所以我真的不知道)能够使用 load 事件或 onload 。

---

我只是出于两个原因提供 hacky 解决方案:我花了一点时间在上面，有一天它可能会有用。不过，我想强调的是，第二种解决方案非常愚蠢。我建议不要在生产环境中使用它，

如果您想使用它，请按以下步骤操作:

• 用window.open创建一个窗口
• write(或 writeln)新窗口中您想要的任何内容。
• write a <script> 包含新窗口的一些功能:
  • 检查 document.readyState 是否“完整”；如果是这样，请执行您的打印程序。否则:
  • 像上面一样使用 setTimeout 重新检查 document.readyState。 (基本上，以某种方式重复。)
  • 我们这样做是因为我们不能使用 load 事件或 onload，因为两者都不会触发。

下面是一些示例代码来说明这一点:

var WindowObject = window.open();
WindowObject.document.write('<img src="http://i.imgur.com/Jvh1OQm.jpg" />'); // This is your content to be printed
WindowObject.document.write('<script>(' + (function() {
    function checkReadyState() {
        if (document.readyState === 'complete') {
            window.focus();
            window.print();
            window.close();
        } else {
            setTimeout(checkReadyState, 200); // May need to change interval
        }
    }

    checkReadyState();
}) + ')();</sc' + 'ript>');

我要再次强调，这是一种非常糟糕的做事方式。我提供这些知识只是因为我觉得它可能对某人有用。