Google Chrome在打印预览中不显示图像 [英] Google Chrome Not Showing Image in Print Preview
问题描述
我有一些代码可以创建弹出式写入一些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();
推荐答案
这里的问题是javascript没有足够的DOM(任何)设置 src
后加载/渲染图像的时间。
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.
这篇关于Google Chrome在打印预览中不显示图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!