我想从包含图片的网页打印不同的内容。我的JavaScript代码也是如此:
function print() {
var w = window.open();
w.document.write(....);
// time for rendering images
setTimeout(function () { w.print(); w.close();},10);
}
Google Chrome显示一个新标签,没有打印对话框。退出选项卡并返回时,打印对话框显示!
当我取出10毫秒超时时,它不显示我的图像(没有时间渲染图像),但对话框立即显示。
也许,有人会告诉我:使用createElement
和appendChild
等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
答案 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.
}
<强>优点:
Cancel
或OK
恢复原始网页。<强>缺点:
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;
}
}