vue 如何进行表格多页打印

Question

如何点击打印，表格的数据可以全部打印出来，形成多页，我在别的地方写可以打印多页，但是在这里不得行，为啥

<template>
    <div class="film-oa m-1 processScheduling">
      <div class="craftTahttps://img-mid.csdnimg.cn/release/static/image/mid/ask/525527162466132.png "#left")
ble">
        <div class="btn p-1 ms-1">
          <a-button type="primary" size="small" @click="doPrint">打印</a-button>
        </div>
        <!-- <div class="table_container"> -->
        <div ref="printHtml">
          <div class="wraper">
            <!-- <div class="header" v-show="isshowHeader">{{useStore.curLine.id==1? '一':'二'}}线生产工艺单</div> -->
            <div class="table_container">
              <table border="1px" cellspacing="0" class="text-center">
              <thead>
                <tr>
                  <th rowspan="2">1</th>
                  <th rowspan="2" class="SecondTd">2</th>
                  <th rowspan="2">3</th>
                  <th rowspan="2">4</th>
                  <th rowspan="2">5</th>
                  <th rowspan="2">6</th>
                  <th rowspan="2">7</th>
                  <th rowspan="2">8</th>
                  <th rowspan="2" style="min-width:55px">9</th>
                  <th rowspan="2" style="min-width:55px">10</th>
                  <th rowspan="2">11</th>
                  <th rowspan="2">12</th>
                  <th rowspan="2">13</th>
                  <th rowspan="2">14</th>
                  <th rowspan="2">16</th>
                  <th rowspan="2">17</th>
                  <th rowspan="2">18</th>
                  <th rowspan="2">19</th>
                  <th colspan="2">20</th>
                  <th rowspan="2">21</th>
                  <th rowspan="2">22</th>
                  <th rowspan="2">24</th>
                </tr>
                <tr>
                  <th>12</th>
                  <th>12</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in 100" :key="index">
                  <td class="firstTd">fdsa</td>
                  <td class="SecondTd">gfdg</td>
                  <td>gfhfd</td>
                  <td>fsdf</td>
                  <td>fsaf</td>
                  <td>re</td>
                  <td>fsadf</td>
                  <td>gsfd</td>
                  <td>da</td>
                  <td>hhsdh</td>
                  <td>fsgda</td>
                  <td>hdh</td>
                  <td>hfdghfh</td>
                  <td>tsadg</td>
                  <td>gfdhfgd</td>
                  <td>hfghf</td>
                  <td>afdgs</td>
                  <td>sagsg</td>
                  <td colspan="2">
                    <div style="display:flex">
                      <div style="width:50%;border-right:1px solid #eee">111</div>
                      <div style="width:50%">111</div>
                    </div>
                  </td>
                  <td>fsadfs</td>
                  <td>fdfsf</td>
                  <td>fsdafas</td>
                </tr>
              </tbody>
            </table>
            </div>
          </div>
        </div>
        <!-- </div> -->
      </div>
    </div>
  
  
  </template>
  <script setup lang="ts">
  import { nextTick, onMounted, reactive, ref, toRaw, watch } from "vue";
  
  
  //打印
  const isShowOperation = ref<boolean>(true);
  const isshowHeader = ref<boolean>(false);
  const printHtml = ref();
  const doPrint = () => {
  
    nextTick(() => {//在这里打印
      let bodyHtml = window.document.body.innerHTML;
      window.document.body.innerHTML = printHtml.value.innerHTML;
      window.print();
      window.document.body.innerHTML = bodyHtml;
      window.location.reload();
    });
  
  }
  </script>
  <style scoped lang="less">
  .craftTable {
    width: 100%;
    margin: auto;
    background-color: #fff;
    height: calc(100vh - 65px);
  
  
  
    .table_container {
      width: 1850px;
      height: calc(100vh - 110px);
      margin: auto;
      overflow: scroll;
    }
  
    .header {
      width: 1816px;
      border: 1px solid #eee;
      height: 40px;
      margin: auto;
      text-align: center;
      line-height: 40px;
      font-size: 20px;
      font-weight: bolder;
    }
  
    table {
      // table-layout: fixed;
      border: none;
      border-collapse: collapse;
      background: #fff;
      text-align: center;
  
      thead {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 3;
  
        tr {
          color: #484848;
          font-weight: bold;
  
          th {
            background-color: #B8E9FF;
            min-width: 60px;
          }
        }
  
      }
    }
  
    tbody {
      tr {
        cursor: pointer;
  
        td {
          min-width: 60px;
          position: -webkit-sticky;
          position: sticky;
          padding: 0px;
        }
  
        td.last_td {
          background-color: #D5F2FF;
          font-weight: bold;
          right: 0;
          z-index: 3;
        }
      }
  
    }
  
    input,
    .ant-input-number {
      border-color: #F45454;
      width: 100%;
    }
  
  
    .icon {
      line-height: 20px;
      position: relative;
  
      .cancel,
      .edit,
      .submit,
      .save,
      .cancelEdit {
        cursor: pointer;
      }
    }
  
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
  
    // /*定义滚动条轨道
    //  内阴影+圆角*/
    ::-webkit-scrollbar-track {
      background-color: #E7EEF2;
    }
  
    // /*定义滑块
    //  内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
      background-color: #D7E0E7;
    }
    .layer{
      border: none;
      border-right: 1px solid var(--xp-gray-e);
    }
  }
  
  .processScheduling {
  

    .SecondTd {
      width: 6%;
    }
  

    th:nth-child(11),
    td:nth-child(11) {
      width: 4%;
    }
  

  

    th:nth-child(14),
    td:nth-child(14) {
      width: 8%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  
   
    th:nth-child(15),
    td:nth-child(15) {
      width: 8%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  
  
    th:nth-child(16),
    td:nth-child(16) {
      width: 8%;
    }
  

    th:nth-child(19),
    td:nth-child(19) {
      width: 10%;
    }
  

    th:nth-child(20),
    td:nth-child(20) {
      width: 8%;
    }
  

    th:nth-child(21),
    td:nth-child(21) {
      width: 8%;
    }
  
   
    th:nth-child(22),
    td:nth-child(22) {
      width: 8%;
    }
  }
  
  .wraper table thead tr th,
  .wraper table tr td {
    // white-space: nowrap;
    font-size: 12px;
  }
  </style>
  

Answer 1

测试了没问题，延时打印试试

    const doPrint = () => {

        nextTick(() => {//在这里打印
            let bodyHtml = window.document.body.innerHTML;
            window.document.body.innerHTML = printHtml.value.innerHTML;
            setTimeout(() => {
                window.print();
                //window.document.body.innerHTML = bodyHtml;//这句没必要
                window.location.reload();
            }, 200)
        });
    }