解决原生js打印 换页时表格被截断等问题

一. 表格被截断问题

1. 解决后效果预览: 分页也不影响表格样式(见下图)

2. 场景: 动态渲染表格内容并打印

-    js部分: 使用print()方法，调用打印机功能打印当前窗口的内容
-    html部分: table原生表格

3. 遇到问题: 表格打印时换页时，表格出现被截断现象(见下图)

4. 解决方法 (代码如下)

    // 媒体查询 @media print (表示只在打印的时候生效）
    @media print {
        table {
            // 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
            border-collapse: collapse;
        }
        
        // 关键代码
        // page-break-inside 属性用于设置是否在指定元素中插入分页符
        // 注意: 您不能对绝对定位的元素使用此属性
        // 注意: 请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。
        tr {
            page-break-inside: avoid;
        }
    }

二. 打印表格其它常见问题总结

1. 打印时页面css样式不生效问题解决

    // 打印的时候css样式会丢失，这里使用document.write将页面引入的css样式插入
    
    // 这里需要根据自己需求获取需要打印的dom，此处为我自己构建的iframe
    let doc = iframe.contentWindow.document;
    $(document).find("link").filter(() => {
        // 过滤出样式
        return $(this).attr("rel").toLowerCase() == "stylesheet";
    }).each(() => {
            doc.write('<link type="text/css" rel="stylesheet" href="'+ $(this).attr("href") + '" >');
        }
    );

2. 分页时每页开头插入表头

    // 给table添加thead即可
    <thead>
        <tr>
            <th>资产名称</th>
            <th>资产名称</th>
            <th>资产名称</th>
            <th>资产名称</th>
        </tr>
    </thead>

效果预览见下图