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

Posted 2021-05-05

我想从包含图片的网页打印不同的内容。我的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内容

我已经将qazxsw poi动态分配用于我的图像

src

而是使用具有相同src值的静态HTML

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

PS：我的Chrome已更新（第63页）

现在不需要渲染时间，我可以提取<img id="header" style="margin-left: auto; margin-right:auto;" src="LogoUp.png" > 函数调用，但是图像没有加载。这很奇怪。我在官方的Chrome调试工具setTimeout中看到了它。它显示一个正确的字符串，但没有指向图像。

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

所以我疯了......

更新： 我也尝试过，没有成功:(我也看到了Chrome DevTools中的html）

Chrome DevTools

这很神奇，因为原始图像在使用 c.appendChild(document.getElementById("header").cloneNode(true)) // where c is the image's parent element 时有效

答案

我做了更多研究，我发现了一个很好的解决方案，而不需要弹出选项卡。魔术是由innerHTML制造的。一个空的：

iFrame

在其他方面，我已经放置了要打印的内容（带图像）

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

显示设置为“无”（因为我不想在页面上显示该内容）。

打印代码仅在2行（长行）中：

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

好处：

• 没有弹出窗口。 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恢复原始页面。
• 打印对话框不会丢失。没有要更改的标签。

缺点：

• 内部HTML分配的渲染要求使用OK。
• setTimeout不会出错，但打印不起作用。我的目标只是一个原型。所以对我来说，我很好。

-/-

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

我很满意我得到的东西。我希望它对某人有用。

更新：

我发现src打印完全忽略CSS资源，如打印CSS文件：

iFrame

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

@media print

它发生是因为逻辑上框架是另一个文档。因此，需要将样式附加到将在@media print { body { font-size: 14pt } } 中克隆的HTML中，或者在iFrame中克隆HTML后，它可能包含在孩子中的css文件（请参阅iFrame）。

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

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

在这种情况下，在上面的here函数中添加以下行。

procPrint

更新2对于屏幕上隐形的d.style.backgroundColor = "#FF0000"; ，使用：

iFrame