从浏览器 chrome 打印网页时缺少 HTML 图像答案

【问题标题】：HTML images are missing while printing a webpage from browser chrome从浏览器 chrome 打印网页时缺少 HTML 图像
【发布时间】：2012-04-13 06:54:31
【问题描述】：

我也在使用 javascript 代码来打印带有一些文本的图像。我在我的 html 页面中使用了一个名为“divPrintArea”的 div 区域。该div的内容将通过调用javascript函数打印出来。

从除 Chrome 之外的所有浏览器（即最新版本的 ie、firefox、opera、safari）打印时，图像都很好。但在 Chrome 的情况下，它有时会丢失。

我的第二个问题是我无法将默认页面布局设置为“横向”。你有什么线索吗？请详细给出一些解决方案。 TIA。

function printdata() {
var printHtml = "";
printHtml = printHtml + "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>";
printHtml = printHtml + "<html xmlns='http://www.w3.org/1999/xhtml'>";
printHtml = printHtml + "<head>";
printHtml = printHtml + "<meta http-equiv='cache-control' content='no-cache, must-revalidate'>";
printHtml = printHtml + "<meta http-equiv='refresh' content='0; http://www.MyWebsite.com/' />";
printHtml = printHtml + "<meta http-equiv='expires' content='-1'>";
printHtml = printHtml + "<meta http-equiv='pragma' content='no-cache, must-revalidate'>";
printHtml = printHtml + "<title>www.MyWebsite.com</title>";
printHtml = printHtml + "<style type=\"text/css\" media=\"print\">td{border:0px solid #000; padding:2px 5px;}";
printHtml = printHtml + "body{background:#fff;";
printHtml = printHtml + "width='100%';";
printHtml = printHtml + "height='100%';";
printHtml = printHtml + "filter:progid:DXImageTransform.Microsoft.BasicImage(Rotation=3);";
printHtml = printHtml + "}";
printHtml = printHtml + "</style></head>";
printHtml = printHtml + "<body>";
printHtml = printHtml + "<div style=\"text-align:left; border-bottom:1px dashed #2D86C5; border-top:1px dashed #2D86C5; font-family:'GillSansMTRegular', Arial;\">";
printHtml = printHtml + document.getElementById("divPrintArea").innerHTML;
printHtml = printHtml + "</div>";
printHtml = printHtml + "</body>";
printHtml = printHtml + "</html>";
win = window.open("http://www.MyWebsite.com/", "My");
win.document.write(printHtml);
win.document.close();
win.focus();
win.onload = win.print();
win.close();
return false;

}

【问题讨论】：

div 区域 'divPrintArea' 隐藏在网页内。那么我如何使用 CSS @media 来做到这一点。请解释一下。

标签： javascript google-chrome printing cross-browser

【解决方案1】：

你的代码有问题：

filter:progid:DXImageTransform.Microsoft.BasicImage(Rotation=3);

只有 IE 支持，你应该改用 CSS3 的transform。

width='100%';
height='100%';

我们不使用= 登录 CSS。我们使用:。也许这就是问题的原因。

旁注

好吧，在您的代码中，您不应该真的做所有这些事情。您应该使用createElement，并将所有printHtml = printHtml + 更改为

printHtml +=

另外，使用document.write 已经过时了。请改用appendChild。 [MDN]

【讨论】：

div 区域“divPrintArea”未显示在网页内。所以我想我必须用所需的内容动态创建一个 HTML 页面，然后打印它。不使用 document.write() 怎么办？
首先创建一个元素<div>，然后将所有其他元素放入其中。然后将其附加到您的页面中。

【解决方案2】：

要打印图像，您应该像这样关闭窗口：

 setTimeout(function () {
            toDoWindow.close();
        }, 2000);

【讨论】：