此处是vue项目中的用法，也可以改写，不使用vue的语法，也可以实现其他框架使用

window.print()

直接调用默认打印，设置打印时样式

  1. @media print {
  2.   @page {
  3.     margin: 0.5cm;
  4.   }
  5. }

普通打印

打印分页表格时，可以实现各分页分别都展示表头。有高度限制，超出了就不展示表头（各浏览器不同）

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>打印测试</title>
  9.   <script src="https://unpkg.com/vue@next"></script>
  10.   <style>
  11.     table {
  12.       font-size: 12px;
  13.       width: 100%;
  14.       font-size: 9pt;
  15.       border-collapse: collapse;
  16.       border-spacing: 0;
  17.     }
  19.     tr {
  20.       page-break-inside: avoid;
  21.     }
  23.     td {
  24.       border: 1px solid #ccc;
  25.       text-align: center;
  26.       height: 36px;
  27.     }
  28.   </style>
  29. </head>
  31. <body>
  32.   <div id="demo">
  33.     <table>
  34.       <thead style="display:table-header-group;font-weight:bold">
  35.         <tr>
  36.           <td colspan="2" align="center" style="font-weight:bold;border:3px double red">每页都有的表头</td>
  37.         </tr>
  38.       </thead>
  39.       <tbody>
  40.         <tr v-for="(item,index) in list">
  41.           <td>{{item.a+index}}</td>
  42.           <td>{{item.b+index}}</td>
  43.         </tr>
  44.       </tbody>
  45.       <tfoot style="display:table-footer-group;font-weight:bold">
  46.         <tr>
  47.           <td colspan="2" align="center" style="font-weight:bold;border:3px double blue">每页都有的表尾</td>
  48.         </tr>
  49.       </tfoot>
  50.     </table>
  51.   </div>
  52.   <script>
  53.     const DEMO = {
  54.       data() {
  55.         return {
  56.           list: []
  57.         }
  58.       },
  59.       mounted() {
  60.         this.list = new Array(50).fill({ a: 1, b: 10 })
  61.         this.$nextTick(() => {
  62.           window.print()
  63.         })
  64.       },
  65.       methods: {
  67.       }
  68.     }
  70.     Vue.createApp(DEMO).mount('#demo')
  71.   </script>
  72. </body>
  74. </html>

根据表头自动计算打印分页

实现功能：动态表头，计算打印数据
注意：

  1. 在使用方法时，需要在打印时，将打印纸的宽高确定，在样式表设置打印的width，height

this.$uDeepClone 深克隆方法
this.$pluc cm、px转换方法

  1. /**
  2.  * 实现打印表头分页
  3.  * 前提：表格结构
  4.  * index 为外层循环的index
  5.  * A4纸打印 21cm*29.7cm
  6.  *
  7.  * <table>
  8.  * <thead :ref="'thead' + index"></thead>
  9.  * <tbody :ref="'tbody' + index">
  10.  *  <tr :ref="'tr' + index"></tr> //分割的数组
  11.  * </tbody>
  12.  * </table>
  13.  *
  14.  * @param {Array} parentData 打印数据
  15.  * @param {String}  name  切分循环的数据
  16.  */
  17. export default {
  18.   methods: {
  19.     // 重写打印页面 根据改变打印数据 printData.tableList 实现
  20.     calcPrintRender(parentData, name) {
  21.       let footH = 30 //最后一行高度
  22.       let pageH = this.$pluc.cm2px(29.7) - footH // 计算px
  23.       let newPrintData = this.$uDeepClone(parentData) //重写数据
  24.       newPrintData = newPrintData.map((v, i) => {
  25.         v.symbol = i //添加标识位
  26.         v.paging = '1/1'
  27.         return v
  28.       })
  29.       for (let pI in parentData) {
  30.         let item = parentData[pI]
  31.         let detailArr = item[name]
  33.         let thead = this.$refs[`thead${pI}`][0]
  34.         let tbody = this.$refs[`tbody${pI}`][0]
  35.         let tr = this.$refs[`tr${pI}`]
  36.         if (thead && tbody && tr) {
  37.           let theadH = thead.offsetHeight //头部高度
  38.           let renderBody = pageH - theadH
  39.           if (theadH > pageH) {
  40.             continue
  41.           }
  42.           let tbodyH = tbody.offsetHeight
  43.           console.log('pageH, theadH, tbodyH,renderBody', pageH, theadH, tbodyH, renderBody)
  44.           // tr总高度
  45.           let trTotal = tr.reduce((prev, next) => {
  46.             console.log(next.offsetHeight)
  47.             return prev + next.offsetHeight
  48.           }, 0)
  49.           // console.log(' trTotal', trTotal)
  50.           if (theadH + tbodyH < pageH) {
  51.             // 不做处理
  52.             continue
  53.           }
  54.           // 获取渲染函数
  55.           let sliceArr = this.deepRenderTr({ tr, renderBody, trTotal })
  56.           // console.log('sliceArr', sliceArr)
  57.           for (let newI in newPrintData) {
  58.             let newItem = newPrintData[newI]
  59.             if (newItem.symbol == pI) {
  60.               let len = sliceArr.length
  61.               if (len > 0) {
  62.                 let newArr = []
  63.                 sliceArr.forEach((v, i) => {
  64.                   let obj = this.$uDeepClone(item)
  65.                   if (i == 0) {
  66.                     obj[name] = detailArr.slice(0, v)
  67.                   } else {
  68.                     obj[name] = detailArr.slice(sliceArr[i - 1], v)
  69.                   }
  70.                   obj.paging = `${i + 1}/${len + 1}`
  71.                   newArr.push(obj)
  72.                 })
  73.                 // 推送最后一组数据
  74.                 let nObj = this.$uDeepClone(item)
  75.                 let last = sliceArr[len - 1] - detailArr.length
  76.                 nObj[name] = detailArr.slice(last)
  77.                 nObj.paging = `${len + 1}/${len + 1}`
  78.                 newArr.push(nObj)
  79.                 newPrintData.splice(newI, 1, ...newArr)
  80.               }
  81.             }
  82.           }
  83.         }
  84.       }
  85.       // console.log('new', newPrintData)
  86.       return newPrintData
  87.     },
  88.     // 获取哪些tr需要截取
  89.     deepRenderTr({ arr = [], tr, renderBody, trTotal }) {
  90.       // 找到第一页 最后 tr的index 暂不考虑表头占满情况
  91.       // console.log(arr, tr.length, renderBody, trTotal)
  92.       let trSum = 0
  93.       let firstPageIndex = null
  94.       for (let trI in tr) {
  95.         trSum += tr[trI].offsetHeight
  96.         if (trSum >= renderBody) {
  97.           firstPageIndex = trI - 1
  98.           break
  99.         }
  100.       }
  101.       if (firstPageIndex === null) {
  102.         return arr
  103.       } else {
  104.         // 计算剩余高度
  105.         let restH = trTotal - trSum + tr[firstPageIndex + 1].offsetHeight
  106.         if (arr.length > 0) {
  107.           let n = firstPageIndex + arr[arr.length - 1]
  108.           arr.push(n)
  109.         } else {
  110.           arr.push(firstPageIndex)
  111.         }
  112.         if (restH < renderBody) {
  113.           return arr
  114.         } else {
  115.           let newTr = tr.slice(firstPageIndex + 1, tr.length)
  116.           let param = { arr: arr, tr: newTr, renderBody: renderBody, trTotal: restH }
  117.           return this.deepRenderTr(param)
  118.         }
  119.       }
  120.     },
  121.   },
  122. }

cm与px的转换

  1. var ratio = 0
  2. pluc()
  3. export default {
  4.   px2cm: function(px) {
  5.     return Math.floor((px * 10) / ratio) / 10
  6.   },
  7.   px2mn: function(px) {
  8.     var r = ratio / 10
  9.     return Math.floor(px / r)
  10.   },
  11.   cm2px: function(cm) {
  12.     return Math.floor(cm * ratio)
  13.   },
  14.   mm2px: function(mm) {
  15.     var r = ratio / 10
  16.     return Math.floor(mm * r)
  17.   },
  18. }
  20. function pluc() {
  21.   'use strict'
  22.   var div = document.createElement('div')
  23.   div.style.width = '1cm'
  24.   div.id = 'puc'
  25.   document.body.appendChild(div)
  26.   var w = getComputedStyle(div, null).width
  27.   ratio = w.substr(0, w.length - 2)
  28.   div.parentNode.removeChild(div)
  29. }