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

问题

I am using this code to open and print image on new html page:

printView(dataUri:string){

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

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

}

When used like that and image is larger than few kB, print preview opens a blank page, because document is not rendered when print is invoked.

I solved that (temporarily) by introducing setTimeout with ~200ms delay before printing, like this:

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

And this works, but I am aware that I should use some DOM/window event to wait until content is loaded. But which one?

What I tried so far:

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

and

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

I would like to keep this Vanilla JS, so please do not refer me to jQuery window.ready.

回答1:

add an onload attribute to your image

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

remove win.print() and win.close() from printView()

and add them into another function print()

print() will be fired when the image is finished loading.

this time Hope It Works

回答2:

I know it's already answered, but I needed to print a new window with a lot of html content and used something like this:

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

回答3:

including the script tag at the bottom of your page should work. because the browser reads the html page from top to bottom, it will fire the event after the page is loaded when the script is located at the bottom of the page.

回答4:

Copy from 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);

How to use it

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

回答5:

Here it is, based mostly on Imtiaz's idea:

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);

I just thought that it's cleaner to do in script, instead of using a script to write another script to html…

来源：https://stackoverflow.com/questions/45795102/how-to-wait-for-html-document-to-load-render-before-printing-it-plain-javascrip

标签

javascript

typescript

onload

dom-events