Question

我有一些代码可以创建弹出式写入一些HTML和打印。谷歌浏览器没有在打印预览中显示图像，但其他浏览器工作正常。我的案例中缺少文件2010-05-22。我怎样才能让它在Chrome中运行？

我的代码：

Logo_big.png

Answer 1

这里的问题是javascript在设置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越低，浏览器加载图片的时间就越短，因此您需要调整此项并考虑适用的较慢的互联网连接/浏览器。

Answer 2

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

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

Answer 3

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

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

Answer 4

您需要在打印前放置延迟。 chrome中有一个原生bug。代码如下： -

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

Answer 5

如果您使用的是jQuery，可以使用＆＃34; on load＆＃34;事件。这将等到整个页面准备就绪（包括图像）。如果你有很多图像，这应该是有用的。 注意您需要在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();
    });

希望这有帮助。

Answer 6

看起来你有两个永不关闭的'div'标签。

Answer 7

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 祝你好运：）

Answer 8

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

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

Answer 9

您可能已经找到了答案，但是我遇到了一个类似的问题，即我的图像不会出现在print（）方法上，但是在执行ctrl + p时会出现。解决此问题的方法是，我仅在img标签上指定了width参数。不管出于什么原因，Chrome的print（）方法都不喜欢这样，所以我也向img标签添加了height参数，最终打印出了图像。

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

Google Chrome在打印预览中不显示图像

9 个答案: