typescript - How to wait for HTML document to loadrender before printing it (plain JavaScript) - Stack Overflow

admin管理员组

文章数量:1299990

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.

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.

• javascript
• typescript
• onload
• dom-events

Share Improve this question Follow asked Aug 21, 2017 at 10:43 bockobocko 39833 gold badges77 silver badges1818 bronze badges 9

• What do you mean by "wait for HTML document to load"? As soon as you do window.open(), a new document is created and automatically loaded, because it's initially empty – Daniel Commented Aug 21, 2017 at 10:58
• I believe your win.document.onload events are not being fired because you're defining them after that window.open(), by the time you bind the event handler, the event as already been called – Daniel Commented Aug 21, 2017 at 10:59
• And your main problem here is that you want the page to load only after certain conditions! In the example you specified here in this question, you only have 1 condition, which is (load after the image being loaded) – Daniel Commented Aug 21, 2017 at 11:01
• Taking these facts into account, we can conclude that no DOM methods nor event handlers can help you with that! – Daniel Commented Aug 21, 2017 at 11:02
• I can suggest you a solution, but since your loading is not actually the document's one, you'll have to update it whenever you change or add something that should be ready after that load! – Daniel Commented Aug 21, 2017 at 11:04

 |  Show 4 more ments

5 Answers 5

Sorted by: Reset to default 3

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

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

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.

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 === "plete") {
        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>

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…

本文标签： typescriptHow to wait for HTML document to loadrender before printing it (plain JavaScript)Stack Overflow