问题描述
我有一些代码来创建一个弹出窗口，写一些 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.
这篇关于谷歌浏览器在打印预览中不显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！