js表格打印自动分页demo

2023年1月22日 120次阅读 来源: 木木先生

两个必须要有一个。

每页都须要表头就将内容放在这其中：
<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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞