谷歌浏览器在打印预览中不显示图像答案

【问题标题】：Google Chrome Not Showing Image in Print Preview谷歌浏览器在打印预览中不显示图像
【发布时间】：2015-10-21 21:43:30
【问题描述】：

我有一些代码来创建一个弹出窗口，写一些 html 并打印。谷歌浏览器没有在打印预览中显示图像，但其他浏览器工作正常。在我的情况下，文件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();

【问题讨论】：

标签： javascript google-chrome printing popup

【解决方案1】：

您可能已经找到了答案，但是我遇到了类似的问题，我的图像不会出现在 print() 方法上，但会在执行 ctrl+p 时出现。我的问题的解决方案是我只在我的 img 标签上指定了一个宽度参数。无论出于何种原因，Chrome 的 print() 方法不喜欢这样，所以我也在 img 标签中添加了一个高度参数，它最终打印了图像。

我在您的代码中注意到您的 img 标记中没有指定任何参数。我的猜测是通过添加这些参数它应该打印你的图像。

【讨论】：

【解决方案2】：

如果你使用 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();
    });

希望这会有所帮助。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

您需要让浏览器有时间加载/渲染（从缓存或其他方式）图像，您可以通过设置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 随时询问您对chat.stackoverflow.com/rooms/213771/… 有什么问题的一些信息

【解决方案5】：

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 祝你好运:)

【讨论】：

【解决方案6】：

您可以在您的 css 中添加以下内容以进行媒体打印：

img {
    -webkit-print-color-adjust: exact;
}

【讨论】：

【解决方案7】：

经过深入研究，我找到了在谷歌浏览器打印预览中显示图像和背景的解决方案：

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 的帖子对部分代码的帮助。

【讨论】：

【解决方案8】：

您需要在打印之前设置延迟。 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页面，它会有自己的生命周期。

【解决方案9】：

看起来您有两个从未关闭的打开“div”标签。

【讨论】：

我删除了一些内容以使 sn-p 可读。但问题仍然存在
我已经检查了html的有效性并通过了