javascript Chrome 打印空白页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29079172/
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
Chrome print blank page
提问by user1930254
I have an old javascript code to print images, if a user clicks on the thumbnail. It used to work just fine, but lately (only in Chrome!) there is a blank page in preview.
如果用户单击缩略图，我有一个旧的 javascript 代码来打印图像。它曾经工作得很好，但最近（仅在 Chrome 中！）预览中有一个空白页面。
Here is a demonstration in JsBin: http://jsbin.com/yehefuwaso/7Click the printer icon. Now try it in Firefox; it will work as expected.
这是 JsBin 中的演示：http://jsbin.com/yehefuwaso/7单击打印机图标。现在在 Firefox 中尝试一下；它会按预期工作。
Chrome: 41.0.2272.89 m
铬：41.0.2272.89 m
Firefox: 30.0, 36.0.1
火狐：30.0、36.0.1
function newWindow(src){
win = window.open("","","width=600,height=600");
var doc = win.document;
// init head
var head = doc.getElementsByTagName("head")[0];
// create title
var title = doc.createElement("title");
title.text = "Child Window";
head.appendChild(title);
// create script
var code = "function printFunction() { window.focus(); window.print(); }";
var script = doc.createElement("script");
script.text = code;
script.type = "text/javascript";
head.appendChild(script);
// init body
var body = doc.body;
//image
doc.write('<img src="'+src+'" width="300">');
//chrome
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
win.printFunction();
} else {
win.document.close();
win.focus();
win.print();
win.close();
}
}
采纳答案by Paul S.
It looks like it's attempting to print before the <img>has loaded, move the call to print inside an event handler for the loadevent of windowby opening the link as a data URIor Blob, for example
它看起来像是在<img>加载之前尝试打印，例如，通过打开链接作为数据 URI或Blob，将调用移动到加载事件的事件处理程序中window
var code = '\
<html>\
<head>\
<title></title>\
<script>\
function printFunction() {\
window.focus();\
window.print();\
window.close();\
}\
window.addEventListener(\'load\', printFunction);\
</script>\
</head>\
<body><img src="'+src+'" width="300"></body>\
</html>';
window.open('data:text/html,' + code, '_blank', 'width=600,height=600');
Don't forget you may need to HTML encodethe tags in code
不要忘记您可能需要对标签进行HTML 编码code
You could probably just listen for loadon the <img>instead, but if you ever do anything more complicated than tring to print a single image you may find it breaks again in future
你很可能只是监听负荷的<img>替代，但如果你做任何事情比特林打印您可能会发现一个单一的形象更加复杂，未来再次爆发
doc.write('<img onload="printFunction();" src="'+src+'" width="300">');
Where printFunctionis the print function for all browsers
printFunction所有浏览器的打印功能在哪里
回答by live-love
I encountered the same problem in Chrome. You can try these approaches, the first one worked for me. setTimeout didn't work for me (had to edit this later).
我在 Chrome 中遇到了同样的问题。您可以尝试这些方法，第一种方法对我有用。setTimeout 对我不起作用（稍后必须编辑）。
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
w = window.open();
w.document.write(printContents);
w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');
w.document.close(); // necessary for IE >= 10
w.focus(); // necessary for IE >= 10
return true;
}
setTimeout:
设置超时：
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
w = window.open();
w.document.write(printContents);
w.document.close(); // necessary for IE >= 10
w.focus(); // necessary for IE >= 10
setTimeout(function () { // necessary for Chrome
w.print();
w.close();
}, 0);
return true;
}
回答by kemicofa ghost
You need to wait for the image to finish loading:
您需要等待图像完成加载：
var img = new Image();
img.src = src;
img.style.width = '300px';
img.onload = function(){
doc.write(img);
};
