javascript - 从 Chrome 浏览器打印网页时 HTML 图像丢失

标签 javascript google-chrome printing cross-browser

我正在使用 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;

}

最佳答案

您的代码存在问题:

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

只有 IE 支持此功能,您应该使用 CSS3 的 transform 来代替。

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

我们不在 CSS 中使用 = 符号。我们使用 :。也许这就是问题的原因。

旁注

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

printHtml += 

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

关于javascript - 从 Chrome 浏览器打印网页时 HTML 图像丢失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10136477/

相关文章:

javascript - 在 Django 中打印 PDF 文件

javascript - 查找 JS 对象中的成员位置

javascript - 你必须在 View 中使用 ng-Controller 还是可以在 $routeProvider 中声明它?

windows - 在批处理文件中执行第二个命令

c# - 将 Cefsharp 作为 Chrome 运行

python - python中的print函数是否有可以打印的字符串长度限制?

javascript - 限制函数中动态列表项的数量

javascript - 如何在 d3.js 中更新图表图例?

google-chrome - 如何在 Chrome 中关闭 Windows 集成身份验证

c - 如何在C中以逗号分隔的十六进制字符串打印定义的int?