如何打印表格的CSS

Question

I need to get the table printed along with it's css using jQuery. 我需要使用jQuery将表格及其CSS一起打印。 I have included @media print section in my css file. 我的css文件中包含@media打印部分。 But when i click the print button, in print preview it only displays basic html layout. 但是，当我单击“打印”按钮时，在打印预览中它仅显示基本的html布局。

Following is the 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>

Following is my Css: 以下是我的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;
}
}

Following is my script.js: 以下是我的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

Create two separate CSS files. 创建两个单独的CSS文件。 One for @media screen. 一个用于@media屏幕。 Underneath that, create a new CSS file for @media print. 在其下，为@media print创建一个新的CSS文件。 Like this: 像这样：

<link rel="stylesheet" href="css/screen.css" media="screen" />
<link rel="stylesheet" href="css/print.css" media="print" />

Screen CSS: 屏幕CSS：

/* Normal screen CSS (no @media required) */

Print CSS: 打印CSS：

@media print { }

Always works for me! 永远为我工作！ Good luck! 祝好运！

Answer 2

You're opening a brand new window which doesn't have any reference to your stylesheet. 您正在打开一个全新的窗口，该窗口没有任何样式表引用。 Try this: 尝试这个：

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