Javascript CSS媒体打印不工作_Javascript_Css_Printing_Media_Css Tables

Javascript CSS媒体打印不工作

javascript css printing

Javascript CSS媒体打印不工作,javascript,css,printing,media,css-tables,Javascript,Css,Printing,Media,Css Tables,我有一个PHP页面，需要在其中放置一个print按钮。为此，我在下面添加了Javascript： <script type="text/javascript"> function PrintContent() { var DocumentContainer = document.getElementById('prnt'); var WindowObject = window.open('', 'PrintWindow', 'width

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

我的

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\u 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();

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（“”）；
WindowObject.document.writeln（“”）；
WindowObject.document.writeln（“”）；
WindowObject.document.writeln（“”）；
WindowObject.document.writeln（DocumentContainer.innerHTML）；
WindowObject.document.writeln（“”）；
WindowObject.document.close（）；
WindowObject.focus（）；
WindowObject.print（）；
WindowObject.close（）；

如果要使用

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>');

WindowObject.document.writeln（“”）；
WindowObject.document.writeln（“”）；
WindowObject.document.writeln（“”）；
WindowObject.document.writeln（“”）；
WindowObject.document.writeln（DocumentContainer.innerHTML）；
WindowObject.document.writeln（“”）；

请注意，media=“print”
仅对打印本身有影响，页面不会在屏幕上设置样式。您可以省略该属性，或者改用media=“all”
。
您是如何添加该css的<代码>链接

标签应该放在页面的

标题

部分，你还没有在弹出窗口中创建一个标签。我修改了我的javascript coe，同样的结果！（我不习惯js代码！）这是我的错。。。您正在使用

“media=”print“

，屏幕上没有使用它，您只能在打印纸上看到效果。只需删除该属性。我已更正了答案。

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>');