Chrome打印空白页 | Chrome打印空白页

本文介绍了Chrome打印空白页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如果用户点击缩略图，我有一个旧的JavaScript代码来打印图像。它曾经工作得很好，但最近（只在Chrome！）预览中有一个空白页面。

以下是JsBin中的演示：
点击打印机图标。现在在Firefox中试用;它会按预期工作。

Chrome：41.0.2272.89 m

Firefox：30.0，36.0.1

 函数newWindow（src）{
 
 win = window.open（，，宽度= 600，高度= 600\" ）; 
 var doc = win.document; 
 // init头部
 var head = doc.getElementsByTagName（head）[0]; 
 //创建标题
 var title = doc.createElement（title）; 
 title.text =子窗口; 
 head.appendChild（title）; 
 //创建脚本
 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>'）; 
 $ b $ // chrome 
 if（navigator.userAgent.toLowerCase（）。indexOf（'chrome'）> -1）{
 
 win.printFunction（） ; 
 
} else {
 win.document.close（）; 
 win.focus（）; 
 win.print（）; 
 win.close（）; 
} 
}

解决方案

它看起来像是在< img> 加载之前尝试打印，将该调用移动到 load 事件 window 通过打开链接为数据URI 或 Blob ，例如

  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'）;

不要忘记您可能需要 HTML编码 代码

中的标记

您可能只需在< img> 上监听加载，但是如果您执行的任何操作比打印单个图像更复杂您可能会发现它将来会再次崩溃

  doc.write（'< img onload =printFunction（）;src = '+ src +'width =300>'）;

其中 printFunction 是所有人的打印功能浏览器

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.

Here is a demonstration in JsBin: http://jsbin.com/yehefuwaso/7Click the printer icon. Now try it in Firefox; it will work as expected.

Chrome: 41.0.2272.89 m

Firefox: 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();
    }
}

解决方案

It looks like it's attempting to print before the <img> has loaded, move the call to print inside an event handler for the load event of window by opening the link as a data URI or Blob, for example

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 encode the tags in code

You could probably just listen for load on 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

doc.write('<img onload="printFunction();" src="'+src+'" width="300">');

Where printFunction is the print function for all browsers

这篇关于Chrome打印空白页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！