Question

我有一个简单的桌子，下面有一个按钮。这是我的jsp的正文部分，如下所示：

<div id="myDivForPrint">
            <table class="t1">
                <tbody>
                <tr>
                    <th>One</th>
                    <th>Two</th>
                    <th>Three</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                </tbody>
            </table>
        </div>
        <button onclick="printDiv()">Print</button>

以下是带有@media规则的CSS，它应该格式化表格。 CSS位于我的jsp的主题部分：

    @media print,screen{
        table.t1 { 
                margin: 1em auto; 
                border-collapse: collapse; 
                font-family: Arial, Helvetica, sans-serif; 
                } 

            .t1 th, .t1 td { 
                padding: 4px 8px; 
                } 

            .t1 thead th { 
                background: #4f81bd; 
                text-transform: lowercase; 
                text-align: left; 
                font-size: 15px; 
                color: #fff; 
                } 

            .t1 tr { 
                border-right: 1px solid #95b3d7; 
                } 

            .t1 tbody tr { 
                border-bottom: 1px solid #95b3d7; 
                } 

            .t1 tbody tr:nth-child(odd) { 
                background: #dbe5f0; 
            } 

            .t1 tbody th, .t1 tbody tr:nth-child(even) td { 
                border-right: 1px solid #95b3d7; 
            } 

            .t1 tfoot th { 
                background: #4f81bd; 
                text-align: left; 
                font-weight: normal; 
                font-size: 10px; 
                color: #fff; 
                } 

            .t1 tr *:nth-child(3), .t1 tr *:nth-child(4) { 
                text-align: right; 
            }
        }
    </style>

下面是打印包含我的表的div的javascript函数。它位于我的jsp的主体部分：

<script type="text/javascript">
            function printDiv()
                {
                    var divToPrint=document.getElementById("myDivForPrint");                
                    newWin= window.open("");
                    newWin.document.write(divToPrint.outerHTML);
                    newWin.document.close();
                    newWin.document.focus();
                    newWin.print();
                    newWin.close();
                }

    </script>

页面在屏幕上格式很好。但是，当我单击打印按钮并将页面打印为xps文档时，所有CSS格式都将丢失，并且只会打印表格的内容，这看起来非常糟糕。

我做错了什么？我正在使用IE8，我无法移动到其他浏览器或更新版本的IE。

Answer 1

您可以在样式表中为屏幕和打印介质使用不同的样式，即

@media screen
{
    table.test {
        font-family:"Times New Roman",Georgia;
        font-size:10px;
        // more
    }
}

@media print
{
    table.test {
        font-family:Verdana, Arial;
        font-size:10px;
        // more
    }
}

当您打印表格时，只会应用在打印介质中定义的样式。

Click This for more

@media print css不打印格式表

1 个答案: