Menu
I have some code to create a pop-up write some html and print. Google Chrome is not showing images in the print preview, but other browsers are working fine. The file Logo_big.png is missing in my case. How can I get it to work in Chrome also?
My code:
var newWindow = window.open('', '', 'width=100, height=100'),
document = newWindow.document.open(),
pageContent =
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8" />' +
'<title>Inventory</title>' +
'<style type="text/css">body {-webkit-print-color-adjust: exact; font-family: Arial; }</style>' +
'</head>' +
'<body><div><div style="width:33.33%; float:left;"><img src="img/Logo_big.png"/></body></html>';
document.write(pageContent);
document.close();
newWindow.moveTo(0, 0);
newWindow.resizeTo(screen.width, screen.height);
newWindow.print();
newWindow.close();
725
The issue here is javascript not giving the DOM enough (any) time to load / render the image once it has the src set.
You need to allow time for the browser to load / render (from cache or otherwise) the image, you can do so by setting a setTimeout to delay the printing from the content being set.
An example for this specific question would be:
var newWindow = window.open('', '', 'width=100, height=100'),
document = newWindow.document.open(),
pageContent =
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8" />' +
'<title>Inventory</title>' +
'<style type="text/css">body {-webkit-print-color-adjust: exact; font-family: Arial; }</style>' +
'</head>' +
'<body><div><div style="width:33.33%; float:left;"><img src="img/Logo_big.png"/></body></html>';
document.write(pageContent);
document.close();
newWindow.moveTo(0, 0);
newWindow.resizeTo(screen.width, screen.height);
setTimeout(function() {
newWindow.print();
newWindow.close();
}, 250);
The lower you set the setTimeout, the less time the browser will have to load the image so you will need to adjust this and account for slower internet connections / browsers where applicable.
51
After a deep research I found a solution for showing the images and background in google chrome print preview:
function PopUp(data) {
var mywindow = window.open('','','left=0,top=0,width=950,height=600,toolbar=0,scrollbars=0,status=0,addressbar=0');
var is_chrome = Boolean(mywindow.chrome);
mywindow.document.write(data);
mywindow.document.close(); // necessary for IE >= 10 and necessary before onload for chrome
if (is_chrome) {
mywindow.onload = function() { // wait until all resources loaded
mywindow.focus(); // necessary for IE >= 10
mywindow.print(); // change window to mywindow
mywindow.close();// change window to mywindow
};
}
else {
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
}
return true;
}
Thanks to Anand Deep Singh post that helped with a part of the code.
22
You can add the following in your css for media print:
img {
-webkit-print-color-adjust: exact;
}
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
