Chrome打印对话框未显示或src失败

时间:2018-01-17 21:35:06

标签: javascript image google-chrome printing src

我想从包含图片的网页打印不同的内容。我的JavaScript代码也是如此:

function print() {
 var w = window.open();  
 w.document.write(....);  
    //  time for rendering images
 setTimeout(function () { w.print();  w.close();},10);
}

Google Chrome显示一个新标签,没有打印对话框。退出选项卡并返回时,打印对话框显示!

当我取出10毫秒超时时,它不显示我的图像(没有时间渲染图像),但对话框立即显示。

也许,有人会告诉我:使用createElementappendChild等DOM函数创建HTML。所以你不需要渲染时间,而且它更整洁。

因此我选择了从头开始创建的整个HTML内容

我已将src dinamic分配用于我的图片

ele.setAttribute("src","LogoUp.png"); // ele is an image element

而是使用带有相同src值

的静态HTML
<img id="header" style="margin-left: auto;
    margin-right:auto;" src="LogoUp.png" >

PS:我的Chrome已更新(第63页)

现在不需要渲染时间,我可以提取setTimeout函数调用,但是图像没有加载。这很奇怪。我在Chrome DevTools官方Chrome调试工具中看到了它。它显示一个正确的字符串,但没有指向图像。

我正在使用Windows 7的本地计算机,该图像与html源位于同一目录中。

所以我疯了......

更新
我也尝试过,但没有成功:(我也看到了Chrome DevTools)中的html

 c.appendChild(document.getElementById("header").cloneNode(true))
// where c is the image's parent element 

令人惊讶的是,原始图片在使用innerHTML

时有效

1 个答案:

答案 0 :(得分:0)

我做了更多的研究,并且我发现了一个很好的解决方案,而不需要弹出式选项卡。魔术是由iFrame制造的。一个空的:

<iframe id="luck" style="border:none;" >
</iframe>

在其他方面,我已经放置了要打印的内容(带图像)

<div class="printer" style="margin:0; padding:0; display:none"> 
...
</div>

显示设置为&#34;无&#34; (因为我不想在页面上显示该内容)。

下面的打印代码只有2行(长行):

function procPrint() {
  document.getElementById("luck").contentDocument.body.innerHTML =    
    document.getElementsByClassName('printer')[0].innerHTML;
  setTimeout(function() {luck.contentWindow.print();},10); 
   // just 10 ms waiting time is enough, 
   //  maybe complex content demands more.
} 

<强>优点:

  • 没有弹出窗口。 CancelOK恢复原始网页。
  • 不缺少打印对话框。没有要更改的标签。

<强>缺点:

  • 渲染innerHTML分配需要setTimeout使用。
  • Firefox不会出错,但打印不起作用。我的目标只是一个原型。所以对我来说,我很好。

- / -

我没有使用DOM分配测试src错误(正确的字符串不显示图像)。

我对自己的所得感到满意。我希望它对某人有用。

<强>更新

我发现iFrame打印完全忽略了CSS资源,如打印CSS文件:

<link rel="stylesheet" type="text/css" href="/print.css" media="print" />
CSS文件中的

@media print规格如:

@media print {
   body { font-size: 14pt }
}

这是因为逻辑上框架是另一个文档。因此,需要将样式附加到将在iFrame内克隆的HTML中,或者在iFrame内部克隆HTML后,可能会在子项中包含css文件(请参阅here })。

我的大脑理解逻辑,但它很奇怪:如果你在HTML打印源中放置一个样式它可以工作,但如果你在CSS文件中使用类名,它会更改克隆源而不是克隆的节点。

如果需要在打印中更改或设置背景颜色(或图像),则直接在body iframe中更改。一个指定了投币器中的背景颜色并不能完成工作。

在这种情况下,请在上面的procPrint函数中添加以下行。

d.style.backgroundColor  = "#FF0000";  

更新2 对于屏幕上不可见的iFrame,请使用:

@media screen{    
    .printonly, .printonly *  {
        display: none !important;
    }
}