详解window.print()，实现长列表打印分页

lamCCH2023-09-25 10:40

相信大家平时做项目时，打印需求很常见，但想把打印做好，还是要花点时间的。特别是长列表要分页的情况。

我们知道浏览原生 API ```window.print()``` 可以用于印当前窗口（window.document）视图内容。调用此方法会产生一个打印预览弹框，用户可以根据具体设置来得到打印结果。

一、window的打印事件

默认情况下，调用 window.print() 会对整个 document.body 进行打印，当需要打印指定容器内容时，可以这样做：

1、先获取指定容器中的内容，将body的内容替换掉，调用了打印方法后，再把原来的body恢复。

html 复制代码 
<body>
     <div id="container1">
        <p>这是第一个段落</p>
     </div>
     <div id="container2">
        <p>这是第二个段落</p>
     </div>
  
  <input type="button" value="打印此页面" onclick="printPage()" />

  <script>
    const printPage= () => {
      let newstr = document.getElementById("container1").innerHTML;
      let oldstr = document.body.innerHTML;
      document.body.innerHTML = newstr;
      window.print();
      document.body.innerHTML = oldstr;
  </script>
</body>

2、监听打印前、后事件实现区域打印

window.onbeforeprint()、window.onafterprint()

html 复制代码 
<body>
  <div id="container">
    <p>这是一个段落</p>
    <h1 id="title">这是一个标题</h1>
  </div>
  
  <input type="button" value="打印此页面" onclick="printPage()" />

  <script>
    const printPage= () => {
      window.print();
    }
    
    // 打印前事件
    window.onbeforeprint = function() {
      // 隐藏不需要打印的元素
      document.getElementById('title').style.display = 'none';
    }

    // 打印完成后
    window.onafterprint = function() {
      // 放开隐藏的元素
      document.getElementById('title').style.display = 'block';
    }
  </script>
</body>

二、打印样式

我们页面的样式和打印页面时的样式是两个不同的样式，打印时会默认携带页面的样式，同时呢我们也可以修改页面打印时的样式。修改打印样式的方法：

1、使用内联media属性

html 复制代码 
<style media="print">
  .container{
    width:800px;
  }
</style>

2、使用媒体查询

html 复制代码 
<style>
    @media print {
      h1{
        color: #333;
        background: #ccc;
      }
    }
</style>

3、引入打印样式表

例如：print.css

css 复制代码 
@media print {
    @page {
        size: auto;
        margin: 20px 30px;
    }
    #mainBody{
        margin-top:0 !important;
        margin-bottom:0 !important;
    }
}

用link引入

html 复制代码 
<link rel="stylesheet" type="text/css" href="./css/print.css" media="print" />

注意：

1、如果是前后不分离的项目，在样式中用到`@`时可能会报错："上下文中未定义@media或@page"，这时候我们可以用`<link>`的方式引入。

2、修改打印样式时必须确保打印机样式实际上确实覆盖了主样式表。可以使用!important。

3、@page属性可以控制打印页面的边距大小和页眉页脚

css 复制代码 
@media print {
    @page {
        size: auto; // {size:A4}、{size: 800px 1200px}、{size:portrait}竖向打印、{size:landscape}横向打印

        margin: 20px 30px; // 边距，可去除页眉页脚
    }

    // 覆盖页面原有样式
    #container{
        margin-top:0 !important;
        margin-bottom:0 !important;
    }
}

4、-webkit-print-color-adjust：是一个在浏览器中强制打印背景颜色和字体颜色的css属性，当打印出来的某些元素的背景颜色没有被显示时，可以使用-webkit-print-color-adjust:exact

5、当需要自定义打印分页时机时，可通过如下方式将指定 DOM 设为分割点。

css 复制代码 
@media print {
  h1 {
    page-break-before: always; //在指定元素前面添加分页符
  }

  #title {
    page-break-after: always;//在指定元素后面添加分页符
  }
}

了解更多：page-break-after - CSS：层叠样式表 | MDN

三、长列表打印

打印长列表时会要求自动分页，但添加了分页符效果可能并不理想。最常见的就是表格行被从中间截断，那要怎么解决呢？

其实我们只要控制打印的行数就可以了。我们需要知道打印元素的高度和表格行的高度，算出一页纸可以打印多少行，超出的部分放到下一页打印。（一页放多少行没必要计算，根据打印元素的高度估算下就可以了。）

示例：

html 复制代码 
<style>
        body {
            font-family: "微软雅黑",Verdana,SimHei,"Microsoft JhengHei",Tahoma;
            line-height: 1.5;
            background-color: #ffffff;
            margin: 0;
        }

        
        // 打印容器
        #mainBody {
            margin: 20px 20px 0 20px;
        }

        table {
            border: 1px solid #000;
            border-collapse: collapse;
            width: 100%;
        }

            table td {
                border: 1px solid #000;
                height: 30px;
                text-align: center;
            }

            table th {
                border: 1px solid #000;
                height: 30px;
                text-align: center;
            }

        

        .printContainer {
            margin: 0 auto;
            // 打印内容宽高
            width: 1052px;
            height: 1480px;
            position: relative;
        }

        .printTitle {
            font-size: 22px;
            font-weight: bold;
            text-align: center;
        }

        .printnav {
            display: flex;
            justify-content: space-between;
        }

        .signature_footer {
            position: absolute;
            width: 100%;
            bottom: -20px;
            display: flex;
            justify-content: space-around;
            font-size: 20px;
        }
</style>
<body>
    <div id="mainBody"></div>
</body>

	<script>
        $(document).ready(function () {
            getList()
        })

        //获取地址栏参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }

       // 将列表数据分页，array要分页的数据，subNum是每页多少条（根据纸张大小估算一页能展示多少条）
        function groupArray(array, subNum) {
            let index = 0
            let newArray = []
            while (index < array.length) {
                newArray.push(array.slice(index, (index += subNum)))
            }
            return newArray
        }

        // 获取数据源，页面添加元素
        function getList() {
            var params = {
                PatientID: getUrlParam('PatientID'),
                BedNo: getUrlParam('BedNo'),
                xdStartDate: getUrlParam('StartDate'),
                xdEndDate: getUrlParam('EndDate')
            }

            $.get('/IndexPrintList', params, function (res) {

                // 先清空上一次的数据
                $('#mainBody').empty()

                // 分页的数据，返回的数组长度即页数
                var arr = groupArray(res.alist, 14)

                if (arr.length) {
                    for (let i = 0; i < arr.length; i++) {
                        // 创建打印元素
                        $('#mainBody').append(`<div class="printContainer">

                            <div class="printTitle">${res.hospitalName}</div>
                            <div style="text-align:center;font-weight:bold;font-size:20px;margin:20px 0;">定点血糖记录表</div>
                            <div class="printnav" style="margin: 10px 0; font-size:14px;">
                                <div>
                                    患者ID： ${res.patientModel.no}
                                </div>
                                <div>
                                    姓名：${res.patientModel.name}
                                </div>
                                <div>
                                    性别： ${res.patientModel.sex == 0 ? "男" : "女"}
                                </div>
                                <div>
                                    病区：${res.patientModel.Bed.WardModel.wardName}
                                </div>
                                <div>
                                    床号：${res.patientModel.Bed.innerOrder}
                                </div>
                                <div>
                                    测量次数:${res.allNum}
                                </div>
                             </div>
                             <div class="printContent">
                                 <table>
                                     <thead>
                                          <tr>
                                             <th colspan="2">日期\监测点</th>
                                             ${res.SortList.map(column => {
                                                 return `
                                                     <th>${column.name}</th>
                                                 `
                                             }).join("")}
                                          </tr>
                                      </thead>

                                      <tbody>
                                          ${arr[i].map(row => {
                                             return `
                                                 <tr>
                                                     <td rowspan="3" style="width:90px">${row.measureTime}</td>
                                                     <td>血糖值（mmol/L）</td>
                                                     ${res.MeasurePointList.map(point => {
                                                         if (row.dict[point.id]) {
                                                             return `
                                                                 <td style="color:${row.dict[point.id].color}"> 		    																		 ${row.dict[point.id].Value}
                                                             	 </td>`
                                                         } else {
                                                             return `<td></td>`
                                                         }
                                                     }).join("")}
                                                 </tr>
                                                 <tr>
                                                     <td>操作者</td>
                                                     ${res.MeasurePointList.map(point => {
                                                         if (row.dict[point.id]) {
                                                             return `<td>${row.dict[point.id].AccountName}</td>`
                                                         } else {
                                                             return `<td></td>`
                                                         }

                                                     }).join("")}
                                                 </tr>
                                                 <tr>
                                                     <td>测量时间</td>
                                                     ${res.MeasurePointList.map(point => {
                                                         if (row.dict[point.id]) {
                                                             return `<td>08:00</td>`
                                                         } else {
                                                             return `<td></td>`
                                                         }

                                                     }).join("")}
                                                 </tr>
                                                 `
                                             }).join("")
                                          }
                                     </tbody>
                                 </table>
                             </div>
                             <div class="signature_footer">
                                 <div>医生手签：</div>
                                 <div style="margin-right:30px;">质控护士手签：</div>
                             </div>

                        </div>`)
                    }
                }

                window.print();
            })
        }
    </script>

代码解释：

1、首先给打印元素设置宽和高，高度根据需要或实际情况设置。（可根据A4纸大小来定）

2、通过接口拿到长列表数据，然后用`groupArray`方法计算需要打印几页。（groupArray函数返回一个二维数据，二维数组的长度就是页数，二维数组的每一项就是每页的数据）

3、根据这个二维数组循环创建要打印的元素。（类`.printContainer`是要打印的整体内容，即一页纸的内容，arr[i]就是每页的表格数据）

4、示例中每页都加了标题和签名，表格有合并单元格。

5、简单表格如下：

html 复制代码 
<table>
    <thead>
        <tr>
            <th>检测日期</th>
            <th>检测值</th>
            <th>操作护士</th>
         </tr>
    </thead>
                                            
    <tbody>
        ${arr[i].map(item=>{
            return `<tr>
                        <td>${item.MeasureDateStr}</td>
                        <td>${item.value}</td>
                        <td>${item.AccountName}</td>
                    </tr>`
            }).join("")
        }
     </tbody>
</table>
相关推荐
小小竹子3 分钟前
前端vue-实现富文本组件
前端·vue.js·富文本
万物得其道者成11 分钟前
React Zustand状态管理库的使用
开发语言·javascript·ecmascript
小白小白从不日白12 分钟前
react hooks--useReducer
前端·javascript·react.js
下雪天的夏风24 分钟前
TS - tsconfig.json 和 tsconfig.node.json 的关系，如何在TS 中使用 JS 不报错
前端·javascript·typescript
diygwcom36 分钟前
electron-updater实现electron全量版本更新
前端·javascript·electron
volodyan39 分钟前
electron react离线使用monaco-editor
javascript·react.js·electron
^^为欢几何^^1 小时前
lodash中_.difference如何过滤数组
javascript·数据结构·算法
Hello-Mr.Wang1 小时前
vue3中开发引导页的方法
开发语言·前端·javascript
程序员凡尘1 小时前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法，亲测有效！！！
前端·javascript·vue.js
编程零零七5 小时前
Python数据分析工具(三)：pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习