js表格打印自动分页demo

javascript/jquery

浏览数:1,498

2019-1-10

两个必须要有一个。

每页都需要表头就将内容放在这个中:
<thead style=”display: table-header-group; font-weight: bold”></thead>

每页都需要表尾:
<tfoot style=”display: table-footer-group; font-weight: bold”></tfoot>

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        @media print {
            INPUT {
                display: none;
            }
        }
    </style>
</head>

<body>
<table border="1" style="font-size: 9pt;" width="300px" align="center">
    <thead style="display: table-header-group; font-weight: bold">  
    <tr>
        <td align="center" style="font-weight: bold; border: 3px double red">表头</td>
        <td align="center" style="font-weight: bold; border: 3px double red">表头2</td>
    </tr>
    </thead>
    <tbody style="text-align: center">
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容1</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容2</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容3</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容3</td>
        <td>表`请输入代码`格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容3</td>
        <td>表格内容</td>
    </tr>
    </tbody>
    <tfoot style="display: table-footer-group; font-weight: bold">
    <tr>
        <td colspan="2" align="center" style="font-weight: bold; border: 3px double blue">每页都有的表尾</td>
    </tr>
    </tfoot>
</table>
<input type="button" value=" 打 印 " onclick="javascript: window.print();">
</body>
</html>

原文地址:https://segmentfault.com/a/1190000017831841