我有一个 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是所有数据所在的类，上面的代码与我用来在.但当我点击 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();
最佳答案
如果您要使用 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 - CSS 媒体打印不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17122409/