原生JS使用PrintJs进行表格打印 -- 遇到的问题总结

ᥬ 小月亮

已于 2024-02-08 10:02:31 修改

阅读量980

点赞数 4

分类专栏： JS 文章标签： javascript 开发语言 ecmascript

于 2024-02-08 09:57:44 首次发布

本文链接：https://blog.csdn.net/Y1914960928/article/details/136071674

版权

JS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

需求1：表格自动分页之后，表头在每一页都需要显示

html中表头增加 thead 标签
css样式新增：

thead {
   display: table-header-group; /* 这个属性使thead总是在新的page-break之后重新开始 */
}

需求2：表格自动分页之后，页头需要在每一页都显示

因为表头能重复显示，所以我是直接将需要重复的页头也放在表头中，然后给一个高度进行样式的调整。

不论是多表头还是只有一个表头，表头的高度要小于整页高度的四分之一，表头过高会让浏览器认为是一种错误，不重复显示表头

需求3：表格自动分页之后，页尾需要在每一页都显示

html中增加 tfoot 标签，使用空格来进行高度占位。

 <tfoot>
    <tr>
        <td>
            <div class="footer-space">&nbsp;</div>
            <div class="footer-space">&nbsp;</div>
            <div class="footer-space">&nbsp;</div>
            <div class="footer-space">&nbsp;</div>
            <div class="footer-space">&nbsp;</div>
            <div class="footer-space">&nbsp;</div>
        </td>
    </tr>
</tfoot>

css样式：

/* 页尾内容固定显示在底部 */
.printFooter {
    position: fixed;
    bottom: 0;
}

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印页面</title>
    <style>
        /* 点击的按钮 */
        #btn {
            margin: 20px;
            padding: 20px 40px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <button id="btn">点击按钮进行打印</button>

    <div id="printJS-form">
        <!-- 打印单中间 表格部分-->
        <div class="printBody">
            <table class="printBody-table">
                <thead class="printBody-tableThead">
                </thead>
                <tbody class="printTbody">
                    <tr>
                        <!-- 表格数据 -->
                        <td>1234567890zxcvbnmnmm,Print.js can be used to quickly print any image on your page, by passing the image url. This can be useful when you have multiple images on the screen, using a low resolution version of the images. When users try to print the selected image, you can pass the high resolution url to Print.js.</td>
                        <td>M</td>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>
                            <div class="footer-space">&nbsp;</div>
                            <div class="footer-space">&nbsp;</div>
                            <div class="footer-space">&nbsp;</div>
                            <div class="footer-space">&nbsp;</div>
                            <div class="footer-space">&nbsp;</div>
                            <div class="footer-space">&nbsp;</div>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <!-- 打印单尾部 -->
        <div class="printFooter">
            <div class="printFooter-tips">尾部</div>
        </div>
    </div>

    <!-- 引入printJs -->
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/print-js/1.6.0/print.js"></script>
    <script>
        // 动态的数据，这里是示例，如果示例的数据的键不确定，需要对整体的数据重新进行处理，以下演示为数据的键是固定的
        let resData = {
            "tableData": [{
                "a": "1",
                "b" : '动态数据-YVHYVHYVHYVHYVHYVHYVH',
                "c" : '动态数据-456',
                "d" : '动态数据-M',
                "e" : '动态数据-Y',
            },{
                "a": "1",
                "b" : '动态数据-YVHYVHYVHYVHYVHYVHYVH',
                "c" : '动态数据-456',
                "d" : '动态数据-M',
                "e" : '动态数据-Y',
            }]
        }
        // 点击按钮之后，首先进行动态数据的插入，然后再调用printJs进行打印
        let btnDom = document.getElementById("btn")
        btnDom.onclick=function() {
            // 将动态的数据拿到后，进行模板数据的插入
            handleTemplate()
            // 打印
            printJS({
                printable: 'printJS-form', // 数据源:pdf or image的url，html类型则填打印区域元素id，json类型则是数据object。
                type: 'html', // 默认pdf，可选类型:pdf, html, image, json
                scanStyles: false, 	//此属性默认为true，printJs会自动扫描当前html结构所用的样式表
                style: stringCssFunc(), // 打印的内容是没有css样式的，此处需要string类型的css样式
            })
        }

        // 插入动态的数据
        var handleTemplate = () => {
            // 打印单页眉的数据动态添加
            let tHeadDom = document.getElementsByClassName('printBody-tableThead')[0]
            let printHeadHtml = `
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
            </tr>
            `
            tHeadDom.innerHTML = printHeadHtml
            // 打印单中间的表格
            let printTbody = document.getElementsByClassName('printTbody')[0]
            let tempHtml = '' // 表格中的数据
            for(let i = 0; i < 100;i++){
                let item = resData.tableData[i] || {}
                tempHtml += `<tr>
                    <td>${item.a || 'a'}</td>
                    <td>${item.b || 'b'}</td>
                    <td>${item.c || 'c'}</td>
                    <td>${item.d || 'd'}</td>
                    <td>${item.e || 'e'}</td>
                </tr>`
            }
            printTbody.innerHTML = tempHtml
        }

        // 样式代码
        var stringCssFunc = function() {
            return `
                @page {
                    margin: 10mm;
                };
                .printBody-table thead tr:last-child {
                    border: 1px solid #333;  
                }
                .printBody-table thead tr:last-child th {
                    border-right: 1px solid #333;  
                }
                .printBody-table tbody tr td {
                    white-space: wrap;
                    text-align: center;
                    border: 1px solid #333;
                }
                

                /*  **************************   打印单尾部 start ********************************* */
                .printFooter {
                    width: calc(100% - 80px);
                    padding: 20px;
                }
                .printHead-single {
                    display: flex;
                }
                .printFooter-tips{
                    margin-bottom: 10px;
                    font-size: 12px;
                }
                /*  **************************   打印单尾部 end ********************************* */
                /* 页眉、页脚设置 */
                @media print {
                    .printBody-table {
                        page-break-inside: avoid;
                        border-collapse: collapse;
                    }
                    /* 保证thead始终出现在新页顶部 */
                    .printBody-table thead {
                        display: table-header-group; /* 这个属性使thead总是在新的page-break之后重新开始 */
                    }
                    .printFooter {
                        position: fixed;
                        bottom: 0;
                    }
                }
            `
        }
    </script>
</body>
</html>