Javascript 谷歌浏览器在打印预览中不显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31725373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Chrome Not Showing Image in Print Preview
提问by user3573766
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.pngis missing in my case. How can I get it to work in Chrome also?
我有一些代码来创建一个弹出窗口，写一些 html 并打印。Google Chrome 未在打印预览中显示图像，但其他浏览器工作正常。Logo_big.png在我的情况下，该文件丢失了。我怎样才能让它在 Chrome 中工作？
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();
回答by William Isted
The issue here is javascript not giving the DOM enough (any) time to load / render the image once it has the srcset.
这里的问题是 javascript 没有给 DOM 足够的（任何）时间来加载/渲染图像，一旦它src设置好了。
You need to allow time for the browser to load / render (from cache or otherwise) the image, you can do so by setting a setTimeoutto delay the printing from the content being set.
您需要留出时间让浏览器加载/渲染（从缓存或其他方式）图像，您可以通过设置 asetTimeout来延迟正在设置的内容的打印。
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.
您设置的setTimeout越低，浏览器加载图像的时间就越短，因此您需要调整它并在适用的情况下考虑较慢的互联网连接/浏览器。
回答by Jesus Flores
After a deep research I found a solution for showing the images and background in google chrome print preview:
经过深入研究，我找到了在 google chrome 打印预览中显示图像和背景的解决方案：
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.
感谢 Anand Deep Singh 的帖子对部分代码提供了帮助。
回答by Kostas Karkaletsis
You can add the following in your css for media print:
您可以在用于媒体打印的 css 中添加以下内容：
img {
-webkit-print-color-adjust: exact;
}
回答by Anand Deep Singh
You need to put delay before print. There is a native bug in chrome. Code would as under :-
您需要在打印前设置延迟。chrome 中有一个本机错误。代码如下：-
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;
}
回答by Hayden Passmore
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.
如果您使用 jQuery，则可以使用“加载时”事件。这将等到整个页面准备就绪（包括图像）。如果您有很多图像，这应该很有用。注意 您需要在 html 中包含 jQuery 源代码。
Include the following in your html.
在您的 html 中包含以下内容。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Your javaScript will now be.
您的 javaScript 现在将是。
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.
希望这可以帮助。
回答by mohitSehgal
I used the solution given by Jesus Flores
BUTit doesn't work when you cancel the print and then do it again.
So i used the setTimeout()function to tackle that situation,
我使用了Jesus Flores提供的解决方案，
但是当您取消打印然后再次打印时它不起作用。所以我使用了setTimeout()函数来解决这种情况，
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);
var isPrinting = false;
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
isPrinting = true;
mywindow.focus(); // necessary for IE >= 10
mywindow.print(); // change window to mywindow
mywindow.close();// change window to mywindow
isPrinting = false;
};
setTimeout(function () { if(!isPrinting){mywindow.print();mywindow.close();} }, 300);
}
else {
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
}
return true;
}
This might be not the best way to do that so all kind of suggestions are welcome!
这可能不是最好的方法，所以欢迎提出各种建议！
回答by seemc0
It looks like you have two opening 'div' tags that are never closed.
看起来您有两个永远不会关闭的打开“div”标签。
回答by seemc0
var newWindow = window.open('', '', 'width=100, height=100'),
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; } img{display:visible}</style>' +
'</head>' +
'<body><img src="img/Logo_big.png"/></body></html>';
newWindow.document.write(pageContent);
document.close();
newWindow.moveTo(0, 0);
newWindow.resizeTo(screen.width, screen.height);
newWindow.print();
newWindow.close();
I hope that code works fine
Note that if image is not displayed so you need to specify absolute image url
Good luck :)
我希望代码可以正常工作
请注意，如果未显示图像，则需要指定绝对图像 url 祝你好运:)
回答by Michael
You have probably found the answer to this already, but I had a similar problem where my image wouldn't appear on print() method, but would appear when doing ctrl+p. The solution to my issue was that I had only specified a width parameter on my img tag. For whatever reason Chrome's print() method doesn't like this, so I added a height parameter to the img tag as well and it ended up printing the image.
您可能已经找到了答案，但我遇到了类似的问题，我的图像不会出现在 print() 方法中，但会在执行 ctrl+p 时出现。我的问题的解决方案是我只在我的 img 标签上指定了一个宽度参数。无论出于何种原因，Chrome 的 print() 方法不喜欢这样，所以我也向 img 标签添加了一个高度参数，它最终打印了图像。
I noticed within your code that you have neither parameter specified within your img tag. My guess is by adding these parameters it should print your image.
我注意到在你的代码中你的 img 标签中没有指定参数。我的猜测是通过添加这些参数，它应该打印您的图像。
