Question

我想打开一个新窗口/标签，在文档中放入一些HTML，然后调出浏览器打印对话框以打印该新窗口。我使用以下内容来完成此任务：

var w = window.open();
w.document.write(html);
w.document.close();

html包含的位置：

...<body onload="window.print()">...</body>...

一切正常，窗口弹出，并显示新页面的打印对话框，但是，由于某种原因，浏览器在显示打印对话框之前没有等待页面上的所有图像加载。这导致一些图像无法打印。

有许多图像，它们是在服务器端动态生成的（每个加载大约需要1秒）。如何在加载所有图像后强制浏览器仅打印？

我已经确认在Chrome和Firefox中发生这种情况。我感谢任何帮助。

Answer 1

尝试将其从body.onload事件更改为window.onload事件。

w.window.onload = window.print()

或类似的东西。

Answer 2

尝试将打印机调用放在最后一张图像的onload事件中。

<img onload="window.print()" ... />

编辑：

OP的完整答案如下所示：

我想出了以下脚本，使用@ chockleyc的答案作为灵感。我不能只使用最后一张图片，因为它们不一定按顺序加载。在加载所有图像（使用jQuery）后，以下脚本将打印页面：

var hasPrinted = false;
$(document).ready(function(){
  $('img').load(function(){
    var imgs = $('img');
    var loadedAll=true;
    for(var i=0;i<imgs.length;i++){
      loadedAll &= $(imgs[i])[0].complete;
    }
    if (loadedAll && !hasPrinted) {
      console.log('printing');
      hasPrinted = true;
      window.print();
    }
    else {
      console.log('not all images have loaded');
    }
  })
});

在JavaScript缺失图像中打印弹出窗口

2 个答案: