2

我有一个 PHP 页面，我需要在其中放置一个print按钮。为此，我在下面添加了 Javascript：

    <script type="text/javascript">
    function PrintContent() {
        var DocumentContainer = document.getElementById('prnt');
        var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
        WindowObject.document.writeln(DocumentContainer.innerHTML);
        WindowObject.document.close();
        WindowObject.focus();
        WindowObject.print();
        WindowObject.close();
    }
</script>

现在用一些 css 打印 div prnt，我添加了一个 css

<link rel="stylesheet" type="text/css" href="css/print.css" media="print">

我print.css的是：

.preorder_list 
{
    overflow:hidden;
}
.preorder_list h2
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#0e337f;
    font-size:17px;
    margin-top:40px;
}
.preorder_list table
{
    width:750px;
    background:#d5d5d5;
    padding:8px 4px 8px 4px;
     border-radius: 4px;
    -moz-border-radius:4px;
    -webkit-border-radius: 4px;
    border:1px solid #dbdbe2;

}
.preorder_list th
{
    padding:5px;
}
.preorder_list td
{
    text-align:center;
    font-family:"Trebuchet MS";
    font-size:15px;
    padding:5px;
}
.preorder_list input[type="text"]
{
    width:50px;
    border:1px solid #b10c04;
    text-align:center;
}

.preorder_list input[type="text"]:focus
{
    color:#1226a1;
    font-weight:bold;
}

.preorder_list.mw
{
    padding:10px 0 10px 20px;
    border:1px solid #e4e3df;

}
.preorder_list.mw:hover
{
    background:#fbfbfa;
}
.preorder_list.sw
{
    margin-top:20px;
    padding:10px 0 10px 20px;
    border:1px solid #e4e3df;
}
.preorder_list h1
{
    color:#1b2d58;
    font-size:18px;
    font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
}
.preorder_list.sw:hover
{
    background:#fbfbfa;
}

preorder_list所有数据所在的类在哪里，上面的代码和我css之前显示的一样。但是当我点击时我没有得到想要Pirnt的外观，请看一下图像。普通视图 在一个音符相同的输出中打印预览

编辑：

修改后的javascript代码：

var DocumentContainer = document.getElementById('prnt');
        var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');

        WindowObject.document.writeln('<!DOCTYPE html>');
        WindowObject.document.writeln('<html><head><title></title>');
        WindowObject.document.writeln('<link rel="stylesheet" type="text/css" href="css/print.css" media="print">');
        WindowObject.document.writeln('</head><body>');
        WindowObject.document.writeln(DocumentContainer.innerHTML);
        WindowObject.document.writeln('</body></html>');

        WindowObject.document.close();
        WindowObject.focus();
        WindowObject.print();
        WindowObject.close();
4

1 回答 1

3

如果要使用 创建文档document.write()，则必须创建整个文档。试试这个：

WindowObject.document.writeln('<!DOCTYPE html>');
WindowObject.document.writeln('<html><head><title></title>');
WindowObject.document.writeln('<link rel="stylesheet" type="text/css" href="css/print.css">');
WindowObject.document.writeln('</head><body>');
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.writeln('</body></html>');

请注意，这media="print"仅对打印本身有影响，页面没有在屏幕上设置样式。您可以省略该属性，或改用该属性media="all"。

于 2013-06-15T10:17:22.053 回答