Question

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

printView(dataUri:string){

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

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

}

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

我在打印前通过引入setTimeout延迟约200毫秒来解决这个问题（暂时），如下所示：

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() 。

这次希望有效

Answer 2

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

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

Answer 3

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

Answer 4

从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 5

这里主要基于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 ......

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

5 个答案: