logo标签列表

谷歌浏览器在打印预览中无法显示图像

javascriptgoogle-chromeprintingpopup
21

我有一些代码可以创建一个弹出窗口，写入一些HTML并进行打印。Google Chrome在打印预览中不显示图像，但其他浏览器都正常工作。在我的情况下，文件Logo_big.png缺失。我该如何使它在Chrome中也能正常工作？

我的代码：

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();
10个回答
41

这里的问题是JavaScript没有给DOM足够的（甚至是任何）时间来加载/渲染图像，一旦src被设置。

你需要允许浏览器有足够的时间来加载/渲染图像（从缓存或其他方式），你可以通过设置setTimeout来延迟内容设置后再打印。

一个针对此特定问题的示例代码如下：

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 越低，浏览器加载图像的时间就会越少，因此你需要调整这个值并考虑更慢的互联网连接/适用于更慢的浏览器。

@gustavz 如果你遇到了问题，请随时在这里发送一些信息 https://chat.stackoverflow.com/rooms/213771/room-for-william-isted-and-gustavz - William Isted
1
它对我有效，你通过一个简单而短小的解决方案节省了我们的时间... - Mohamed Imran
13

经过深入研究，我找到了一种解决方法，可以在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;
}

感谢 Anand Deep Singh 的帖子，它对代码的某部分有所帮助。

12

你可以在 CSS 中为媒体打印添加以下内容：

img {
    -webkit-print-color-adjust: exact;
}
5
您需要在打印之前设置延迟。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;
}
我认为这不是一个 bug。因为打印窗口也是一个 HTML 页面，它有自己的生命周期。 - Mahendra Singh
4
如果您正在使用jQuery，可以使用“on load”事件。这将等待整个页面准备就绪（包括图像）。如果您有许多图像，则此方法应该很有用。注意：您需要在html中包含jQuery源。 在html中包含以下内容。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 您的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();
    });

希望这有所帮助。
1

看起来你有两个未关闭的开放性‘div’标签。

我已经删除了一些内容以使代码片段更易读，但问题仍然存在。 - user3573766
我已经检查了HTML的有效性并且通过了。 - user3573766
1
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();

我希望代码能够正常工作。请注意，如果图像未显示，则需要指定绝对图像URL。祝你好运 :)
1

我使用了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;
}

这可能不是最好的方法，欢迎提出各种建议！

0

另一个简单的解决方案是，您可以在base64中显示图像，这将解决此问题。

0

你可能已经找到了答案，但我曾遇到一个类似的问题：我的图片在print()方法中无法显示，但使用ctrl+p时却可以显示。我的问题解决方案是，在img标签上只指定了width参数。由于某种原因，Chrome的print()方法不喜欢这样，所以我还添加了一个height参数到img标签中，这样就打印出了图片。

我注意到你的代码中没有指定img标签的这两个参数。我的猜测是添加这些参数后，应该可以打印出你的图片。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接