Google Chrome Not Showing Image in Print Preview

javascript google-chrome printing popup

42,153

Solution 1

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.

Solution 2

You can add the following in your css for media print:

img {
    -webkit-print-color-adjust: exact;
}

Solution 3

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.

Solution 4

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

Solution 5

If you are using jQuery you can use the "on load" event. This will wait until the entire page is ready (including Images). This should be useful if you have many images. Note You will need to include the jQuery source in your html.

Include the following in your html.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Your javaScript will now 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);
    $(newWindow.window).on("load", function () {
        newWindow.print();
        newWindow.close();
    });

Hope this helps.

View more solutions

42,153

user3573766

Updated on July 09, 2022

Comments

user3573766 almost 2 years

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

user3573766 almost 9 years

I have deleted some content to make the snippet readable. but the issue persist
user3573766 almost 9 years

I have checked the html validity and passes
Mahendra Singh about 5 years

I don't think this is a bug.As the print window is also a HTML page,it will have its own lifecycle.
William Isted about 4 years

@gustavz Feel free to ping over some info on what your having an issue with chat.stackoverflow.com/rooms/213771/…