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

Delay window.print() until page has loaded within an ajax request to avoid a blank print screen?

本文关键字:加载 请求 屏幕 打印 空白 ajax print window 延迟      更新时间:2023-09-26

我试图用这段代码做的是向生成条形码并返回它们进行打印的东西发出 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();
});

这一切都包装在一个 $( 文档 ).ready(function(){});

在做了大量的研究之后,我发现了两个答案:一个可能更好的约定,另一个更容易实现,但(可悲的是)也相当笨拙。

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

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

然后,在从"条形码.php"发回的内容中,添加一个脚本:

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

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


只提供黑客解决方案有两个原因:我花了一点时间在上面,有一天它可能会被证明是有用的。然而,我想强调,第二种解决方案非常愚蠢。我建议不要在生产环境中使用它,并且

如果您想使用它,它是这样进行的:

  • 创建包含window.open的窗口
  • write(或writeln)您想要的任何内容到新窗口中。
  • write包含某些功能的<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>');

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

您可以

尝试以这种方式使用WindowObject.onload = function () { ... };

barcode.done(function( jqXHR, textStatus ) {
    printText = jqXHR;
    var WindowObject = window.open();
    WindowObject.onload = function () {
        WindowObject.document.writeln(printText);
        WindowObject.focus();
        WindowObject.print();
    };
});