Question

我需要使用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();
});
});

Answer 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 { }

始终适合我！祝你好运！

Answer 2

您正在打开一个全新的窗口，其中没有任何对样式表的引用。试试这个：

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

如何打印表的CSS

2 个答案: