Images not displaying when Print Preview (Or Print) in IE/Chrome/Firefox

I had the same problem over two months ago. I had a button that redirected users to a printer-friendly page and then I triggered print dialog using Javascript.

The problem was that browsers did not wait till images specified in CSS background were downloaded.

I put timeout before triggering the print dialog to give browser time to download images. This approach is not reliable since nobody has constant download speed and it would open the print dialog before the images are downloaded to users with very slow Internet connection.

In the end, I used HTML img tags to embed images on my page and jQuery to trigger the print dialog when the last image is downloaded.

You need to put delay before print. There is a native bug in chrome. Code would as under :-

function PrintDiv(data) {    var mywindow = window.open();    var is_chrome = Boolean(mywindow.chrome);    mywindow.document.write(data);   if (is_chrome) {     setTimeout(function() { // wait until all resources loaded         mywindow.document.close(); // necessary for IE >= 10        mywindow.focus(); // necessary for IE >= 10        mywindow.print(); // change window to winPrint        mywindow.close(); // change window to winPrint     }, 250);   } else {        mywindow.document.close(); // necessary for IE >= 10        mywindow.focus(); // necessary for IE >= 10        mywindow.print();        mywindow.close();   }    return true;}

Just add the below styles to make it work img{max-width:100%;height:auto;}

Its the width of the image being set to 0 in the print which is causing the issue.