如何在打印之前等待 HTML 文档到 load/render（普通 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/window 事件来等待内容加载。 但是哪个？

到目前为止我尝试了什么：

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

在页面底部包含脚本标签应该可以。因为浏览器从上到下读取 html 页面，当脚本位于页面底部时，它将在页面加载后触发事件。

Answer 2

复制自What is the non-jQuery equivalent of '$(document).ready()'? domready.js

(function(exports, d) {
  function domReady(fn, context) {

    function onReady(event) {
      d.removeEventListener("DOMContentLoaded", onReady);
      fn.call(context || exports, event);
    }

    function onReadyIe(event) {
      if (d.readyState === "complete") {
        d.detachEvent("onreadystatechange", onReadyIe);
        fn.call(context || exports, event);
      }
    }

    d.addEventListener && d.addEventListener("DOMContentLoaded", onReady) ||
    d.attachEvent      && d.attachEvent("onreadystatechange", onReadyIe);
  }

  exports.domReady = domReady;
})(window, document);

如何使用

<script src="domready.js"></script>
<script>
  domReady(function(event) {
    alert("dom is ready!");
  });
</script>

Answer 3

为您的图片添加 onload 属性

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

从 printView()[= 中删除 win.print() 和 win.close() 33=]

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

print() 将在图像加载完成时触发。

这次希望有用

Answer 4

这里是，主要基于Imtiaz的想法：

var win = window.open();
var img = win.document.createElement("img");
img.onload = function(){
    win.print();
    win.close();
}
img.src = dataUri;
win.document.body.appendChild(img);

我只是觉得用脚本来做更干净，而不是使用一个脚本来编写另一个脚本 html…

Answer 5

我知道它已经回答了，但我需要打印一个包含大量 html 内容的新 window，并使用了如下内容：

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

如何在打印之前等待 HTML 文档到 load/render（普通 JavaScript）

How to wait for HTML document to load/render before printing it (plain JavaScript)

javascript

onload

dom-events

typescript