3

我有一个 JS 函数，当有人单击按钮时，它会打印我的 html 页面（页面的下半部分）的名为divDisplay的特定 div 的内容。当用户与页面交互时，这个 div 的内容是动态接收的（ ajax ）。打印在 FF、OPERA、IE 中完美运行，但在要打印的弹出窗口中的 chrome 和 safari 中，数据被打乱，没有颜色并且不在正确的位置（好像没有 css 格式）。

function jsPrintDiv(m) {

    glblPopupWindow = window.open("", "PrintWindow", "width=1024,height=768,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
    glblPopupWindow.document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><link rel="stylesheet" type="text/css" href="styles.css"></head><body><div name="divDisplay" id="divDisplay">' + document.getElementById(m).innerHTML + '</div></body></html>');
    glblPopupWindow.document.close();
    glblPopupWindow.document.getElementById("divDisplay").style.top = "0px";

    glblPopupWindow.focus();
    glblPopupWindow.print();
    glblPopupWindow.close();

}

styles.css与进行打印的原始 html 页面所具有的 css 文件相同。doctype也是如此。

divDisplay的CSS ：

#divDisplay {
    position: absolute;
    left: 0.2%;
    top: 305px;
    width: 99.6%;
    bottom: 0.5%;
    /* height: expression(document.body.offsetHeight - 314 + "px"); */
    overflow: auto;
    background-color: #AACCFF;
    font-family: palatino linotype;
    font: palatino linotype;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

有什么想法我可能做错了吗？提前致谢！

编辑：

要打印的弹出窗口中的正确数据（firefox）：http: //img208.imageshack.us/img208/8195/ffprint.jpg

要打印的弹出窗口中的加扰数据（chrome）：http: //img152.imageshack.us/img152/6108/chprint.jpg

EDIT2： 如果我注释掉

glblPopupWindow.print();

行，chrome正确显示它。不知道这是否有帮助。

4

1 回答 1

2

您显示的 Firefox 窗口不是 Firefox 的打印预览。屏幕截图是实际的弹出窗口，这就是它看起来正确的原因。如果您要在 Firefox 中打开该页面，然后转到“文件”->“打印预览”，我敢打赌它看起来与您在 Chrome 中看到的非常相似。

当您打印一个网页时，它的外观并不总是与您查看它时的外观相同。您可以为应打印的页面添加打印样式表，也可以将打印样式添加到现有工作表。在您的 CSS 中指定打印样式：

@media print {
    /* Your Styles Here */
}

此外，浏览器可以以不同方式解释打印网页。为打印网站定义好的 css 真的很痛苦。祝你好运。

于 2013-01-11T23:09:54.693 回答