jquery - 如何打印表格的CSS

Question

我需要使用 jQuery 打印表格及其 CSS。我在我的 css 文件中包含了@media 打印部分。但是当我点击打印按钮时，在打印预览中它只显示基本的 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 { }

总是为我工作!祝你好运!