为了账号安全,请及时绑定邮箱和手机立即绑定

纯table标签的html打印注意事项

标签:
Html/CSS

1. 在firefox下,每页均会打印重复thead(表头),tfoot(表尾)的内容;IE8下无效(其它IE版本未测试)

2. 分页的处理

    @media print {
     .page-break { page-break-after: always; }
   }

在需要分页的tr上,加上该样式即可

3.隐藏某些不需要打印的区域

    @media print {
    .no-print { display: none; }
     }

4.页面顶部网址之类的,如何去掉?

IE:  File -> Page Setup

 

FireFox:  Print -> Page Setup

5.打印页面指定区域

<iframe id="frmPrint" width="0" height="0" frameborder="0"></iframe>
<div id="divContent">这是打印的内容</div>
<div>这里不需要打印</div>
<button onclick="printTest()">打印</button>
<script type="text/javascript">
    function printTest(){
        var ifrm = document.getElementById("frmPrint");    
        //下行中的style只是为了演示如何附加样式
        ifrm.contentWindow.document.body.innerHTML = "<style>*{color:red}</style>" + document.getElementById("divContent").innerHTML;
        ifrm.contentWindow.print();
    }  
</script>

上述代码仅适用于FireFox,IE下建议用css隐藏不需打印的内容 

完整示例代码:

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>html打印测试</title>
        <style type="text/css" media="all">
            * { margin:0; padding:0; font-size:12px }
            table { margin:10px; border:2px solid #000; border-collapse:collapse; margin:5px auto }
            th, td { border:1px solid #000; border-collapse:collapse; padding:3px 5px }
            h1 { font-size:24px }
             @media print {
                .no-print { display: none; }
                .page-break { page-break-after: always; }
            }
        </style>
    </head>
    <body>
        <div class="no-print" style="text-align:center;margin:5px">
            <button onClick="window.print()"> 打 印 </button>
        </div>
        <table >
            <thead>
                <tr>
                    <th colspan="5">
                        <h1>XXXX报表</h1>
                    </th>
                </tr>
                <tr>
                    <th> 序号 </th>
                    <th> 栏目1 </th>
                    <th> 栏目2 </th>
                    <th> 栏目3 </th>
                    <th> 栏目4 </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> 1 </td>
                    <td> 数据1 </td>
                    <td> 数据2 </td>
                    <td> 数据3 </td>
                    <td> 数据4 </td>
                </tr>
                <tr class="page-break">
                    <td> 2 </td>
                    <td> 数据1 </td>
                    <td> 数据2 </td>
                    <td> 数据3 </td>
                    <td> 数据4 </td>
                </tr>
                <tr>
                    <td> 3 </td>
                    <td> 数据1 </td>
                    <td> 数据2 </td>
                    <td> 数据3 </td>
                    <td> 数据4 </td>
                </tr>
                <tr>
                    <td> 4 </td>
                    <td> 数据1 </td>
                    <td> 数据2 </td>
                    <td> 数据3 </td>
                    <td> 数据4 </td>
                </tr>
                <tr>
                    <td> 5 </td>
                    <td> 数据1 </td>
                    <td> 数据2 </td>
                    <td> 数据3 </td>
                    <td> 数据4 </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th> 合计: </th>
                    <th> </th>
                    <th> </th>
                    <th> 300.00 </th>
                    <th> 300.00 </th>
                </tr>
            </tfoot>
        </table>
    </body>
</html>


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消