我需要使用jQuery将表格与其css一起打印。我在我的css文件中包含了@media print部分。但是当我点击打印按钮时,在打印预览中它只显示基本的html布局。
以下是Html:
<div>
<table id="myTable">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr id="clo1">
<td>bill</td>
<td>gates</td>
<td>51</td>
</tr>
<tr id="clo2">
<td>larry</td>
<td>page</td>
<td>61</td>
</tr>
<tr id="clo3">
<td>steve</td>
<td>jobs</td>
<td>71</td>
</tr>
</table>
</div>
<div class="printMe">
<button id="print" type="submit">
Print
</button>
</div>
以下是我的Css:
@media print {
th, td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}
tr {
border: 1px solid gray;
}
td {
width: 200px;
padding: 3px;
}
th {
background-color: #D2E0E8;
color: #003366
}
table {
border: 1pt solid gray;
text-align: center;
}
}
@media screen {
th, td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}
tr {
border: 1px solid gray;
}
td {
width: 200px;
padding: 3px;
}
th {
background-color: #D2E0E8;
color: #003366
}
table {
border: 1pt solid gray;
text-align: center;
}
}
以下是我的script.js:
$(document).ready(function() {
$(".printMe #print").click(function() {
var divToPrint = document.getElementById('myTable');
var popupWin = window.open('', '_blank', 'width=auto,height=auto');
popupWin.document.open();
popupWin.document.write($('#myTable').html());
popupWin.print();
popupWin.document.close();
});
});
答案 0 :(得分:1)
创建两个单独的CSS文件。一个用于@media屏幕。在其下,为@media print创建一个新的CSS文件。像这样:
<link rel="stylesheet" href="css/screen.css" media="screen" />
<link rel="stylesheet" href="css/print.css" media="print" />
屏幕CSS:
/* Normal screen CSS (no @media required) */
打印CSS:
@media print { }
始终适合我! 祝你好运!
答案 1 :(得分:1)
您正在打开一个全新的窗口,其中没有任何对样式表的引用。试试这个:
popupWin.document.open();
popupWin.document.write('<html><head><link rel="stylesheet" media="print" type="text/css" href="print.css"></head><body>');
popupWin.document.write($('#myTable').html());
popupWin.document.write('</body></html>');