CSS媒体打印不起作用答案

【问题标题】：CSS media print not workingCSS媒体打印不起作用
【发布时间】：2013-06-11 22:11:34
【问题描述】：

我有一个 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();

【问题讨论】：

你是怎么添加那个css的？ link 标签应该放在页面的head 部分，您还没有在弹出窗口中创建标签。

标签： javascript css printing media css-tables

【解决方案1】：

如果您要使用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"。

【讨论】：

我修改了我的javascript coe，结果一样！（我不习惯js代码！）
那是我的错...您使用的是"media="print"，它没有在屏幕上使用，您只能在打印纸上看到效果。只需删除该属性。我已经更正了我的答案。