如何在打印HTML文档之前等待其加载/渲染完成（使用纯JavaScript）

11 浏览
0 Comments

如何在打印HTML文档之前等待其加载/渲染完成（使用纯JavaScript）

我正在使用这段代码在新的HTML页面上打开和打印图像：

printView(dataUri:string){
  var win = window.open();
  win.document.write( '');
  win.print();
  win.close();
}

当像这样使用代码并且图像的大小超过几KB时，打印预览会打开一个空白页面，因为在调用打印时文档还没有被渲染。

我通过在打印之前引入大约200毫秒的setTimeout来解决这个问题：

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

这样可以解决问题，但是我知道我应该使用一些DOM/window事件来等待内容加载。但是使用哪个事件呢？

我尝试过以下方法：

win.document.onload = ()=>{
    console.log('event fired'); // 从未触发
    win.print();
    win.close();
}

和

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

我希望保持使用原生JS，所以请不要参考jQuery的window.ready。

0

3 答案

0 Comments

问题的原因是在打印HTML文档之前等待HTML文档加载/渲染。根据提供的内容，有两种解决方法。

第一种方法是将脚本标签包含在页面底部。因为浏览器从上到下读取HTML页面，当脚本位于页面底部时，它会在页面加载后触发事件。

第二种方法是添加defer属性。不确定该方法是否有效，但可以尝试。

以下是整理后的文章：

在使用纯JavaScript打印HTML文档之前，我们需要等待HTML文档加载/渲染完成。根据问题描述，有两种解决方法。

第一种方法是将脚本标签包含在页面底部。因为浏览器从上到下读取HTML页面，所以将脚本放在页面底部可以确保在页面加载完成后触发事件。

第二种方法是添加defer属性。虽然不确定该方法是否有效，但可以尝试。

感谢快速回答这个问题的人。尽管将脚本放在页面底部应该有效，但在尝试添加win.document.write( '<script> window.print(); window.close();</script>');时，并没有达到预期效果，脚本仍然在图片加载之前执行。即使给脚本添加了defer属性，结果也是相同的。

还有另一种方法可以尝试，但我不确定是否有效。我将在下面的答案中提供。

0
0 Comments

问题的出现原因：在打印新窗口时，需要确保HTML文档已经完全加载和渲染完成。

解决方法：使用JavaScript监听HTML文档的加载事件，并在事件触发后进行打印操作。

以下是解决问题的代码示例：

win.document.addEventListener('DOMContentLoaded', this.print());

这段代码中，`win`代表新打开的窗口对象，`addEventListener`是用于添加事件监听器的方法。通过监听`DOMContentLoaded`事件，可以确保在HTML文档加载完毕后执行相应的操作。

在这个例子中，`this.print()`表示执行打印操作。当`DOMContentLoaded`事件被触发时，即HTML文档已经加载和渲染完成，`print()`方法会被调用，从而实现了在HTML文档加载完成后再进行打印操作的需求。

以上就是解决问题的原因和方法。通过监听HTML文档的加载事件，我们可以确保在打印之前等待HTML文档完全加载和渲染完成，以避免打印出不完整或错误的内容。

0
0 Comments

有时候我们需要在HTML文档完全加载和渲染完成之后再进行打印操作。这个问题的解决方法是给图片添加一个`onload`属性，并在图片加载完成后调用`print()`函数进行打印。具体操作如下：

win.document.write('');

另外，还需要将原先在`printView()`函数中的`win.print()`和`win.close()`移除，并将它们放入另一个函数`print()`中。这样，当图片加载完成后，`print()`函数会被触发，实现打印操作。这里希望这次能成功。

function print() {
  win.print();
  win.close();
}

这样修改后的解决方案应该能够满足我们的需求了。感谢你的帮助，让我感到非常开心！

然而，某些情况下了一个问题：如果图片加载速度很慢，存在调用栈溢出的可能性，两个函数相互调用直到满足条件。而且，如果图片来自外部源并且连接中断，会怎么样呢？

非常感谢你的指出，我没有从这个角度考虑到。你知道，程序中总会有一些bug。我已经将解决方案还原到原始状态。

0