window.print（）表格打印完美实现分页

最新推荐文章于 2026-04-17 11:47:29 发布

原创

最新推荐文章于 2026-04-17 11:47:29 发布 · 7.5k 阅读

本文介绍了一种使用JavaScript和CSS实现长表格自动分页的方法，解决了数据动态加载且每列可能多行显示的问题。通过将表格拆分为多个table元素，并利用DOM操作计算行高，实现了自适应分页及表头重复显示。

问题描述：

采用js打印页面，表格过长会出现分页，表格就会被裁减（那种每行固定就一行展示的简单，每个分页给他多少条数据就完事了），这里的问题是数据从后台获取，而且每一列都可能出现换行，多的可能达到10几20行的。

需要的效果
在这里插入图片描述
思路：
分页采用

<div style="page-break-after:always"></div>

一、整理思路

1.不同的分页中都要有表头，那么必然是有多个table组合在一起。，
2.通过css page-break-after:always 去分页。
3.肯定是先渲染后去计算每一行的高度。
4.但是你不确定每行的元素高度，所以渲染前无法知道一页能放多少条数据，同样，你也不知道这个页面需要几页，需要多少个table，所以，我的做法是每个table就只放一条数据，循环渲染，用变量数组控制thead的隐藏，第一个table thead显示，接下去就是通过dom 或者vue的 refs 去获取元素的offsetHeighet;用个定时器去获取吧
下面的代码片段：
let arr=document.getElementsByTagName(‘tbody’);
let heightNum=0; //累加的高度
let onePage=1300; //第一页的高度
for(let i in arr){
heightNum+=arr[i].offsetHeight
if(heightNum>onePage){
this.thead[i]=true; //thead 是控制table 头部隐藏的一个数组
heightNum=arr[i].offsetHeight;
onePage=1500; //第二页高度
}
}
this.thead.push(false) //为了更新到页面
5.给出第一页一个具体的高度数值，和之后分页的具体高度数值。

二，上代码，很多代码是无用的，只是要这个结构div 套 table ，最重要的代码在 getData()里面

.vue
<template>
  <div style="padding-top:20px;" class="print" >
    <div class="printPage" >
      <button class="rt z-button-primary"   @click="print"  :class="{mustRed:!isShow}">打印</button>
      <div class="printMain clr">
          <div class="tc f28">{
  
  {$store.state.userInfo.record.dept_name}}</div>
          <div class="tc mt16 mb20 f24">胰岛素注射监测任务清单</div>
          <div>
              <span class="lt">日期：{
  
  {$route.query.time}}</span>
              <span class="rt mb8">单位：{
  
  {$route.query.unit}}</span>
          </div>

          <div v-for="curItem,index in tableData">
            <div style="page-break-after:always" v-if="thead[index]&&index!=0"></div>
            <div style="height:100px;width:100%" v-if="thead[index]&&index!=0"></div>
            <table class="tables" cellpadding="0" cellspacing="0" style="margin-top:-1px">
              <thead v-if="thead[index]">
                <tr>
                  <td style="width:61px">床号</td>
                  <td style="width:61px">姓名</td>
                  <td style="width:75px">编号</td>
                  &