Fatal编程技术网
  • javascript/
  • Javascript Google Chrome未在打印预览中显示图像

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

javascript google-chrome printing

Javascript Google Chrome未在打印预览中显示图像,javascript,google-chrome,printing,popup,Javascript,Google Chrome,Printing,Popup,我有一些代码来创建一个弹出窗口写一些html和打印。Google Chrome没有在打印预览中显示图像，但其他浏览器工作正常。我的案例中缺少文件Logo\u big.png。我怎样才能让它也在Chrome中工作 我的代码： var newWindow = window.open('', '', 'width=100, height=100'), document = newWindow.document.open(), pageContent =

我有一些代码来创建一个弹出窗口写一些html和打印。Google Chrome没有在打印预览中显示图像，但其他浏览器工作正常。我的案例中缺少文件
Logo\u 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();

var newWindow=window.open（''，'宽度=100，高度=100'），
document=newWindow.document.open（），
页面内容=
'' +
'' +
'' +
'' +
“库存”+
'正文{-webkit打印颜色调整：精确；字体系列：Arial；}'+
'' +
'';
文件。编写（页面内容）；
document.close（）；
newWindow.moveTo（0,0）；
newWindow.resizeTo（屏幕.宽度，屏幕.高度）；
newWindow.print（）；
newWindow.close（）；
看起来您有两个从未关闭的打开“div”标记。

var newWindow=window.open（“”，，“width=100，height=100’），

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();


页面内容=
'' +
'' +
'' +
'' +
“库存”+
'正文{-webkit打印颜色调整：精确；字体系列：Arial；}img{display:visible}'+
'' +
'';
newWindow.document.write（页面内容）；
document.close（）；
newWindow.moveTo（0,0）；
newWindow.resizeTo（屏幕.宽度，屏幕.高度）；
newWindow.print（）；
newWindow.close（）；
我希望代码运行良好
请注意，如果未显示图像，则需要指定绝对图像url
祝您好运：）

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

img {
    -webkit-print-color-adjust: exact;
}
你需要在打印之前延迟。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;
}
经过深入研究，我找到了一种在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 post帮助编写了部分代码。

这里的问题是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);

var newWindow=window.open（''，'宽度=100，高度=100'），
document=newWindow.document.open（），
页面内容=
'' +
'' +
'' +
'' +
“库存”+
'正文{-webkit打印颜色调整：精确；字体系列：Arial；}'+
'' +
'';
文件。编写（页面内容）；
document.close（）；
newWindow.moveTo（0,0）；
newWindow.resizeTo（屏幕.宽度，屏幕.高度）；
setTimeout（函数（）{
newWindow.print（）；
newWindow.close（）；
}, 250);
设置的
setTimeout
越低，浏览器加载图像的时间就越短，因此您需要调整此设置，并在适用的情况下考虑较慢的internet连接/浏览器。

我使用了
但是当您取消打印，然后再次执行时，它不起作用。 所以我使用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;
}
这可能不是最好的方法，因此欢迎提出各种建议

如果使用jQuery，则可以使用“加载”事件。这将等待整个页面准备就绪（包括图像）。如果您有许多图像，这将非常有用注意，您需要在html中包含jQuery源代码。

在html中包含以下内容

您的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();
    });

var newWindow=window.open（''，'宽度=100，高度=100'），
document=newWindow.document.open（），
页面内容=
'' +
'' +
'' +
'' +
“库存”+
'正文{-webkit打印颜色调整：精确；字体系列：Arial；}'+
'' +
'';
文件。编写（页面内容）；
document.close（）；
newWindow.moveTo（0,0）；
newWindow.resizeTo（屏幕.宽度，屏幕.高度）；
$（newWindow.window）.on（“加载”，函数（）{
newWindow.print（）；
newWindow.close（）；
});
希望这有帮助。

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

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

我删除了一些内容，以使代码段可读。但是问题仍然存在。我已经检查了html的有效性和密码。我不认为这是一个错误。因为打印窗口也是一个html页面，它将有自己的生命周期。@gustavz可以随意查看一些关于您的问题的信息