如何打印表格的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 { }

永遠為我工作！ 祝好運！

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 個解決方案

解決方案1
1 2014-06-17 13:53:36

解決方案2
1 2014-06-17 14:49:38

如何打印表格的CSS

問題描述

2 個解決方案

解決方案1 1 2014-06-17 13:53:36

解決方案2 1 2014-06-17 14:49:38

解決方案1
1 2014-06-17 13:53:36

解決方案2
1 2014-06-17 14:49:38