javascript - 如何在打印之前等待 HTML 文档加载/渲染(纯 JavaScript)

Question

我正在使用此代码在新的 html 页面上打开并打印图像:

printView(dataUri:string){

  var win = window.open();
  win.document.write( '<img src="' + dataUri + '">');

  win.print();
  win.close();

}

当这样使用并且图像大于几 kB 时，打印预览会打开一个空白页，因为调用打印时不会呈现文档。

我通过在打印之前引入约 200 毫秒延迟的 setTimeout 解决了这个问题(暂时)，如下所示:

setTimeout( () => {
     win.print();
     win.close();
}, 200);

这是可行的，但是我知道我应该使用一些 DOM/窗口事件来等待内容加载。但是是哪一个呢？

到目前为止我尝试过的:

win.document.onload = ()=>{
    console.log('event fired'); // never fired
    win.print();
    win.close();
}

和

win.addEventListener('load', ()=>{
    console.log('event fired'); // never fired
    win.print();
    win.close();
}

我想保留这个 Vanilla JS，所以请不要让我引用 jQuery window.ready。

Answer 1

为您的图片添加 onload 属性

 win.document.write( '<img src="' + dataUri + '" onload="print()">');

从 中删除 win.print() 和 win.close() printView()

并将它们添加到另一个函数print()

当图像加载完成时，

print() 将被触发。

这次希望它有效