谷歌浏览器在打印预览中不显示图像

2022-01-20 00:00:00 printing google-chrome popup javascript

我有一些代码来创建一个弹出窗口，写一些 html 并打印.谷歌浏览器没有在打印预览中显示图像，但其他浏览器工作正常.在我的情况下，文件 Logo_big.png 丢失了.我怎样才能让它在 Chrome 中也能工作?

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?

我的代码:

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

推荐答案

这里的问题是，一旦设置了 src，javascript 没有给 DOM 足够(任何)时间来加载/渲染图像.

The issue here is javascript not giving the DOM enough (any) time to load / render the image once it has the src set.

您需要留出时间让浏览器加载/渲染(从缓存或其他方式)图像，您可以通过设置 setTimeout 来延迟正在设置的内容的打印.

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

您设置的 setTimeout 越低，浏览器加载图像的时间就越少，因此您需要对此进行调整，并在适用的情况下考虑到较慢的互联网连接/浏览器.

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.

相关文章