通过控制css样式，实现打印自动分页

问题：有多个病历，无法控制打印机纸张大小，每个病历是否需要分页，分多少页都不确定，计算高度实现手动分页
简单讲解一下思路：
通过class属性区分：testAll病历，testways病历中可能需要分页的块级元素，page_break分页元素；获取每个病历（testAll）中的testways元素，遍历通过当前病历（testAll）中的最后一个page_break元素（没有page_break元素则获取当前病历（testAll）距顶部高度）计算当前元素是否需要添加分页样式
注意：page-break-after在样式为display: block;下才会生效

<div id="copyDom">测试</div>
<div v-for="i in 3" class="testAll">
      {{ i }}
      <div v-for="i in 5" class="testways" style="height:50px">测试{{i}}</div>
      <div v-for="i in 5" class="testways" style="height:50px">测试{{i}}</div>
      <div v-for="i in 5" class="testways" style="height:50px">测试{{i}}</div>
      <div v-for="i in 5" class="testways" style="height:50px">测试{{i}}</div>
    </div>

.testAll{
	page-break-after: always;
}
.testways{
    break-inside: avoid;
  }

//引入js
 <script src="../print.js"></script>
 //在合适位置调用
printFun(this.send,data,148,'copyDom')

//func回调方法；data回调方法参数；height页面高度,copyDomId每页重复的表头元素id
printFun(func, data, height, copyDomId) {
        // 获取所有class为testAll的div元素（打印多个病历，一个病历div的class为testAll，用于计算分页长度）
        const pages = document.querySelectorAll('.testAll');

        // 遍历每个page元素（多个病历遍历）
        pages.forEach((page) => {
          // 获取该page元素中class为ways的div元素（获取当前病历中存在的分页元素）
          const waysDivs = page.querySelectorAll('.testways');
          const h = Math.floor(this.px2mm(height?height:208));
          console.log(h, '毫米转px');
          // 遍历每个testways元素
          waysDivs.forEach((waysDiv, i) => {
            const wayDivBreak = page.querySelectorAll('.page_break');
            let distance = 0
            console.log(wayDivBreak.length, '分页', i);
            // 计算waysDiv距离page顶部的垂直距离（当前病历距离顶部高度）
            if (wayDivBreak.length > 0) {
              distance = waysDiv.getClientRects()[0].top + waysDiv.offsetHeight - (wayDivBreak[[wayDivBreak.length - 1]].getClientRects()[0].top + wayDivBreak[[wayDivBreak.length - 1]].offsetHeight);
           // console.log('距离：',distance, '第几个', i, '自身距离顶部高度', waysDiv.offsetTop, '上一分页距顶部', wayDivBreak[[wayDivBreak.length - 1]].getClientRects()[0].top,'自身高度',wayDivBreak[[wayDivBreak.length - 1]].offsetHeight);
            } else {
              distance = waysDiv.getClientRects()[0].top + waysDiv.offsetHeight - page.getClientRects()[0].top;
            //console.log('距离',distance, '第几个', i, '————', waysDiv.getClientRects()[0].top, 'waysDiv距离page顶部的', page.getClientRects()[0].top);
            }
            // 判断距离是否超过208mm
            if (distance > h) {
              // 添加page-break-after: always样式
              waysDivs[i - 1].classList.add('page_break');
              waysDivs[i - 1].style.pageBreakAfter = 'always';
              //console.log(waysDivs[i - 1], '添加分页', waysDiv);
              if (copyDomId) {
		          //需要插入表头
		          let elementCopy = document.getElementById(copyDomId);
		          let clonesElement = elementCopy.cloneNode(true);
		          waysDivs[i].parentNode.insertBefore(clonesElement, waysDivs[i]);
		       }
            }
          });
        });
        setTimeout(() => {
        //回调方法
          func(data);
        }, 200);
      },
      px2mm(mm) {
        // 创建一个1mm宽的元素插入到页面
        let div = document.createElement("div");
        div.id = "mm";
        div.style.width = "1mm";
        document.querySelector("body").appendChild(div);
        // 原生方法获取浏览器对元素的计算值
        let mm1 = document.getElementById("mm").getBoundingClientRect();
        console.log(mm1, '一厘米宽度');
        document.querySelector("body").removeChild(div)
        return mm * mm1.width;
      },

        }