vue window.print()打印多页页面指定内容 纯前端

来了一个需求，要求做分页pdf文档
刚开始以为自己可以，用了插件html2canvas和jspdf （具体可以看我另一篇文章：vue将页面导出pdf，vue导出pdf），做出来了，但是支持下载一页的页面，多页的时候会切割，例如这样

所以我用了调用打印的方法iframe.window.print()，让客户自己另存为pdf
1先建一个文件PrintView.vue文件
内容：这是PrintView.vue的全部代码

<template>
  <div class="print">
    <iframe
      id="iframe"
      style="display: none; width: 100%; height: auto"
      frameborder="0"
    >iframe>
  div>
template>
<script>
// import { styleOnload } from '../utils'
export default {
  name: 'PrintView',
  props: {},
  watch: {},
  methods: {
    setBodyHtml(html) {
      const document = window.document
      const iframe = window.frames[0]
      iframe.document.head.innerHTML = document.head.innerHTML // 获取当前文档的头部给iframe
      iframe.document.body.innerHTML = html // 把传过来的html给iframe头部
      // console.log(iframe.document, '---iframe.document')

      let arr = document.getElementsByTagName('tr')
      console.log(arr)
      let heightNum = 0
      let onePage = 800 //第一页的高度
      for (let i in arr) {
        heightNum += arr[i].offsetHeight
        if (heightNum > onePage) {
          // this.thead[i] = true
          heightNum = arr[i].offsetHeight
          onePage = 1500 //第二页高度
        }
      }
      // 图片和样式加载完成
      Promise.all([this.loadStyle(), this.loadImage()]).then(() => {
        // console.log(res)
        //   打印
        iframe.window.print()
      })
    },
    loadStyle() {
      const iframe = window.frames[0]
      const styles = iframe.document.head.getElementsByTagName('style') // '
      let arrs = []
      arrs = arrs.concat(...styles, ...links)
      for (let i = 0; i < arrs.length; i++) {
        str += arrs[i].outerHTML
      }
      // eslint-disable-next-line no-unused-vars
      str += ''
      // return new Promise((resolve) => {
      //   for (let i = 0; i < arrs.length; i++) {
      //     styleOnload(arrs[i], () => {
      //       if (i === arrs.length - 1) {
      //         console.log('style 样式加载完成')
      //         resolve('style 样式加载完成')
      //       }
      //     })
      //   }
      // })
    },
    loadImage() {
      const iframe = window.frames[0]
      const imgs = iframe.document.body.getElementsByTagName('img') // 
      console.log(imgs)
      return new Promise((resolve) => {
        for (let i = 0; i < imgs.length; i++) {
          imgs[i].onload = function () {
            if (i === imgs.length - 1) {
              console.log('img 加载完成')
              resolve('img 加载完成')
            }
          }
        }
      })
    },
  },
}
script>

2、然后在主页全代码

<template>
  <div class="hello">
    <button @click="handlePrint">下载打印button>
    
    <div>
      <div class="contents" id="print_info">
        <table border="0">
          <tbody>
            <div id="logo" class="logo">
              <img src="../assets/logo.png" class="logo" />
            div>
            <thead>
              <tr>
                <th colspan="8" id="title">报告th>
              tr>
              <tr>
                <th colspan="8" id="title">TITLEth>
              tr>
              <tr class="right-text">
                <th colspan="8" class="right-th">编号(No)：312312312312th>
              tr>
            thead>
          tbody>
          <tbody>
            <tr>
              <td colspan="1">
                <p>项目名称p>
                <p>Project Namep>
              td>
              <td colspan="3">
                <p>项目p>
                <p>Nigeria KOGI Projectp>
              td>
              <td colspan="2">
                <p>p>
                <p>Standardp>
              td>
              <td colspan="2">
                <p>2015p>
              td>
            tr>
            <tr>
              <td colspan="1">
                <p>单号p>
                <p>Application Nop>
              td>
              <td colspan="1">
                <p>等级p>
                <p>Levelp>
              td>
              <td colspan="1">
                <p>单间p>
                <p>Worksheqwewqeopp>
              td>
              <td colspan="1">
                <p>仗量p>
                <p>Pour cubep>
              td>
              <td colspan="2">
                <p>养护类型p>
                <p>Curing typep>
              td>
              <td colspan="2">
                <p>检验批次p>
                <p>Check batchp>
              td>
            tr>
            <tr>
              <td colspan="1">
                <p>JZ2021001p>
              td>
              <td colspan="1">
                <p>C40p>
              td>
              <td colspan="1">
                <p>1001/车间名称p>
              td>
              <td colspan="1">
                <p>25p>
              td>
              <td colspan="2">
                <p>同条件p>
                <p>Same conditionp>
              td>
              <td colspan="2">
                <p>1/2p>
              td>
            tr>
            <tr>
              <td colspan="8" class="result">
                <p>实验结果(Mpa)p>
                <p>Experimental resultp>
              td>
            tr>
          tbody>
          <tbody v-for="(item, index) in tableList" :key="index">
            
            <tr class="td-title">
              <td colspan="2">期限(Age)：7dtd>
              <td colspan="3">方式(Lab method)：测td>
              <td colspan="2">取样部位(Sample)：面td>
              <td colspan="1">日期 (Fix date)：{{ item.date }}td>
            tr>
            <tr>
              <td>
                <p>试验时间p>
                <p>Lab datep>
              td>
              <td>
                <p>重量(Kg)p>
                <p>Weightp>
              td>
              <td>
                <p>长(mm)p>
                <p>Lengthp>
              td>
              <td>
                <p>宽(mm)p>
                <p>Widthp>
              td>
              <td>
                <p>高(mm)p>
                <p>Heightp>
              td>
              <td>
                <p>破坏荷载(KN)p>
                <p>Maximu loadp>
              td>
              <td>
                <p>破坏强度(Mpa)p>
                <p>Compressive Strengthp>
              td>
              <td>
                <p>强度代表(Mpa)p>
                <p>Cube Strengthp>
              td>
              
            tr>
            <tr>
              <td rowspan="3">{{ item.date }}td>
              <td>{{ item.weight }}td>
              <td>{{ item.length }}td>
              <td>{{ item.width }}td>
              <td>{{ item.height }}td>
              <td>{{ item.maximuLoad }}td>
              <td>{{ item.compressiveStrength }}td>
              <td rowspan="3">{{ item.cubeStrength }}td>
            tr>
            <tr>
              <td>{{ item.weight2 }}td>
              <td>{{ item.length2 }}td>
              <td>{{ item.width2 }}td>
              <td>{{ item.height2 }}td>
              <td>{{ item.maximuLoad2 }}td>
              <td>{{ item.compressiveStrength2 }}td>
            tr>
            <tr>
              <td>{{ item.weight3 }}td>
              <td>{{ item.length3 }}td>
              <td>{{ item.width3 }}td>
              <td>{{ item.height3 }}td>
              <td>{{ item.maximuLoad3 }}td>
              <td>{{ item.compressiveStrength3 }}td>
            tr>
            
          tbody>
          <tbody>
            <tr class="result">
              <td colspan="2">
                <p>结论p>
                <p>Conclusionp>
              td>
              <td colspan="6">
                <p>符合大萨达所p>
                <p>To satisfy requirements of standardp>
              td>
            tr>
            <tr>
              <td colspan="4" class="autograph">
                <p>代表签字及日期：p>
                <p>Owner Signature and datep>
              td>
              <td colspan="4" class="autograph">
                <p>签字及日期：p>
                <p>CBMI Signature and datep>
              td>
            tr>
          tbody>
        table>
        <div class="foot">
          <p>Test By：p>
          <p>Date of Report: 2022-06-09p>
        div>
      div>
      
      <print-view ref="PrintView" />
    div>
  div>
template>

<script>
// import html2canvas from 'html2canvas'
// import JsPDF from 'jspdf'
import PrintView from './PrintView'
export default {
  name: 'HelloWorld',
  // components: { PrintView },
  data() {
    return {
      show: true,
      tableList: [
        {
          date: '2022-5-8',
          weight: 25,
          length: 150,
          width: 150,
          height: 150,
          maximuLoad: 758.1,
          compressiveStrength: 33.7,
          cubeStrength: 33.9,
          //
          weight2: 25,
          length2: 150,
          width2: 150,
          height2: 150,
          maximuLoad2: 667.9,
          compressiveStrength2: 29.7,
          //
          weight3: 25,
          length3: 150,
          width3: 150,
          height3: 150,
          maximuLoad3: 859.5,
          compressiveStrength3: 38.2,
        },
        {
          date: '2022-5-29',
          weight: 25,
          length: 150,
          width: 150,
          height: 150,
          maximuLoad: 1206,
          compressiveStrength: 53.6,
          cubeStrength: 51.4,
          //
          weight2: 25,
          length2: 150,
          width2: 150,
          height2: 150,
          maximuLoad2: 1147.1,
          compressiveStrength2: 51,
          //
          weight3: 25,
          length3: 150,
          width3: 150,
          height3: 150,
          maximuLoad3: 1119,
          compressiveStrength3: 49.7,
        },
        {
          date: '2022-5-30',
          weight: 25,
          length: 150,
          width: 150,
          height: 150,
          maximuLoad: 1206,
          compressiveStrength: 53.6,
          cubeStrength: 51.4,
          //
          weight2: 25,
          length2: 150,
          width2: 150,
          height2: 150,
          maximuLoad2: 1147.1,
          compressiveStrength2: 51,
          //
          weight3: 25,
          length3: 150,
          width3: 150,
          height3: 150,
          maximuLoad3: 1119,
          compressiveStrength3: 49.7,
        },
        {
          date: '2022-5-31',
          weight: 25,
          length: 150,
          width: 150,
          height: 150,
          maximuLoad: 1206,
          compressiveStrength: 53.6,
          cubeStrength: 51.4,
          //
          weight2: 25,
          length2: 150,
          width2: 150,
          height2: 150,
          maximuLoad2: 1147.1,
          compressiveStrength2: 51,
          //
          weight3: 25,
          length3: 150,
          width3: 150,
          height3: 150,
          maximuLoad3: 1119,
          compressiveStrength3: 49.7,
        },
        {
          date: '2022-5-31',
          weight: 25,
          length: 150,
          width: 150,
          height: 150,
          maximuLoad: 1206,
          compressiveStrength: 53.6,
          cubeStrength: 51.4,
          //
          weight2: 25,
          length2: 150,
          width2: 150,
          height2: 150,
          maximuLoad2: 1147.1,
          compressiveStrength2: 51,
          //
          weight3: 25,
          length3: 150,
          width3: 150,
          height3: 150,
          maximuLoad3: 1119,
          compressiveStrength3: 49.7,
        },
        {
          date: '2022-5-31',
          weight: 25,
          length: 150,
          width: 150,
          height: 150,
          maximuLoad: 1206,
          compressiveStrength: 53.6,
          cubeStrength: 51.4,
          //
          weight2: 25,
          length2: 150,
          width2: 150,
          height2: 150,
          maximuLoad2: 1147.1,
          compressiveStrength2: 51,
          //
          weight3: 25,
          length3: 150,
          width3: 150,
          height3: 150,
          maximuLoad3: 1119,
          compressiveStrength3: 49.7,
        },
        {
          date: '2022-5-31',
          weight: 25,
          length: 150,
          width: 150,
          height: 150,
          maximuLoad: 1206,
          compressiveStrength: 53.6,
          cubeStrength: 51.4,
          //
          weight2: 25,
          length2: 150,
          width2: 150,
          height2: 150,
          maximuLoad2: 1147.1,
          compressiveStrength2: 51,
          //
          weight3: 25,
          length3: 150,
          width3: 150,
          height3: 150,
          maximuLoad3: 1119,
          compressiveStrength3: 49.7,
        },
        {
          date: '2022-5-31',
          weight: 25,
          length: 150,
          width: 150,
          height: 150,
          maximuLoad: 1206,
          compressiveStrength: 53.6,
          cubeStrength: 51.4,
          //
          weight2: 25,
          length2: 150,
          width2: 150,
          height2: 150,
          maximuLoad2: 1147.1,
          compressiveStrength2: 51,
          //
          weight3: 25,
          length3: 150,
          width3: 150,
          height3: 150,
          maximuLoad3: 1119,
          compressiveStrength3: 49.7,
        },
        // {
        //   date: '2022-5-31',
        //   weight: 25,
        //   length: 150,
        //   width: 150,
        //   height: 150,
        //   maximuLoad: 1206,
        //   compressiveStrength: 53.6,
        //   cubeStrength: 51.4,
        //   //
        //   weight2: 25,
        //   length2: 150,
        //   width2: 150,
        //   height2: 150,
        //   maximuLoad2: 1147.1,
        //   compressiveStrength2: 51,
        //   //
        //   weight3: 25,
        //   length3: 150,
        //   width3: 150,
        //   height3: 150,
        //   maximuLoad3: 1119,
        //   compressiveStrength3: 49.7,
        // },
        // {
        //   date: '2022-5-31',
        //   weight: 25,
        //   length: 150,
        //   width: 150,
        //   height: 150,
        //   maximuLoad: 1206,
        //   compressiveStrength: 53.6,
        //   cubeStrength: 51.4,
        //   //
        //   weight2: 25,
        //   length2: 150,
        //   width2: 150,
        //   height2: 150,
        //   maximuLoad2: 1147.1,
        //   compressiveStrength2: 51,
        //   //
        //   weight3: 25,
        //   length3: 150,
        //   width3: 150,
        //   height3: 150,
        //   maximuLoad3: 1119,
        //   compressiveStrength3: 49.7,
        // },
        // {
        //   date: '2022-5-31',
        //   weight: 25,
        //   length: 150,
        //   width: 150,
        //   height: 150,
        //   maximuLoad: 1206,
        //   compressiveStrength: 53.6,
        //   cubeStrength: 51.4,
        //   //
        //   weight2: 25,
        //   length2: 150,
        //   width2: 150,
        //   height2: 150,
        //   maximuLoad2: 1147.1,
        //   compressiveStrength2: 51,
        //   //
        //   weight3: 25,
        //   length3: 150,
        //   width3: 150,
        //   height3: 150,
        //   maximuLoad3: 1119,
        //   compressiveStrength3: 49.7,
        // },
        // {
        //   date: '2022-5-31',
        //   weight: 25,
        //   length: 150,
        //   width: 150,
        //   height: 150,
        //   maximuLoad: 1206,
        //   compressiveStrength: 53.6,
        //   cubeStrength: 51.4,
        //   //
        //   weight2: 25,
        //   length2: 150,
        //   width2: 150,
        //   height2: 150,
        //   maximuLoad2: 1147.1,
        //   compressiveStrength2: 51,
        //   //
        //   weight3: 25,
        //   length3: 150,
        //   width3: 150,
        //   height3: 150,
        //   maximuLoad3: 1119,
        //   compressiveStrength3: 49.7,
        // },
      ],
    }
  },
  mounted() {},
  methods: {
    // 下载pdf
    handlePrint() {
      const html = document.getElementById('print_info').innerHTML
      this.$refs.PrintView.setBodyHtml(html)
    },
  },
}
script>

<style scoped>
.contents {
  max-width: 900px;
  margin: 0px auto;
  page-break-inside: avoid;
}
.logo {
  width: 245px;
  height: 43px;
  page-break-inside: avoid;
}
.right-text {
  text-align: -webkit-right;
  page-break-inside: avoid;
  break-before: page;
}
.right-th {
  font-size: 14px !important;
  page-break-inside: avoid;
  break-before: page;
}
.result {
  font-size: 16px;
  page-break-inside: avoid;
  break-before: page;
}
.td-title {
  background: #eee;
  page-break-inside: avoid;
  break-before: page;
}
thead {
  page-break-inside: avoid;
  break-before: page;
  display: contents;
}
.autograph {
  text-align: left !important;
  padding-left: 10px;
  page-break-inside: avoid;
  break-before: page;
}
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  page-break-inside: avoid;
  /* break-before: page; */
}

table {
  /* display: grid; */
  border-collapse: collapse;
  border: none;
  /* break-before: page; */
  /* margin-top: -20px; */
  /* page-break-inside: avoid; */
}
th {
  font-size: 20px;
  padding: 10px;
  page-break-inside: avoid;
  break-before: page;
  border: none;
}
tbody {
  border: none;
  page-break-inside: avoid;
  break-before: page;
  /* border-bottom: solid 1px black; */
}
tr {
  /* border: 1px solid black; */
  /* height: 25px; */
  /* border-bottom: solid 1px black; */
  /* border: none; */
  font-size: 14px;
  page-break-inside: avoid;
  text-align: -webkit-center;
  break-before: page;
}
td {
  width: 12.5%;
  page-break-inside: avoid;
  border: 1px solid black;
  text-align: center;
  page-break-before: auto;
  break-before: page;
  height: 45px;
}
style>

这是打印预览的界面，虽然后面有一条横线，但是另存pdf之后是没有的。

请各位赐教，实在找不出其他办法分页不被截断了！！！