Chrome 打印空白页答案

【问题标题】：Chrome print blank pageChrome 打印空白页
【发布时间】：2015-05-18 16:56:25
【问题描述】：

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

这里是 JsBin 中的一个演示：http://jsbin.com/yehefuwaso/7 单击打印机图标。现在在 Firefox 中尝试一下；它会按预期工作。

铬：41.0.2272.89 米

火狐：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();
    }
}

【问题讨论】：

标签： javascript google-chrome printing

【解决方案1】：

看起来它正在尝试在 <img> 加载之前进行打印，通过将链接打开为 数据 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 编码code中的标签

您可能只需要在 <img> 上收听 load，但如果您做过比尝试打印单个图像更复杂的事情，您可能会发现它将来会再次中断

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

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

【讨论】：

我在尝试打印 iframe 时遇到了类似的问题。从$(iframe[0].contentWindow).load() 内部调用print() 可以解决此问题。
@Paul 你能帮上忙吗stackoverflow.com/questions/63187758/…

【解决方案2】：

我在 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;
}

设置超时：

<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;
    }

【讨论】：

pdf文件的情况下我该怎么办？

【解决方案3】：

您需要等待图片加载完成：

var img = new Image();
img.src = src;
img.style.width = '300px';
img.onload = function(){
  doc.write(img);
};

【讨论】：

如果我有pdf文件怎么办