window.print()方法调起浏览器打印

 
<template>
  <div><button @click="del">打印</button></div>
  <div ref="printHtml">
    <div class="wraper">
      <div>
        <table border="1px" cellspacing="0">
          <thead>
            <tr>
              <th rowspan="2">1</th>
              <th rowspan="2">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">9</th>
              <th rowspan="2">0</th>
              <th rowspan="2">11</th>
              <th rowspan="2">12</th>
              <th rowspan="2">13</th>
              <th rowspan="2">14</th>
              <th rowspan="2">15</th>
              <th colspan="2">16</th>
              <th rowspan="2">17</th>
              <th rowspan="2">18</th>
              <th rowspan="2" v-if="showop">操作</th>
            </tr>
            <tr>
              <th>辅A</th>
              <th>辅B</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in data" :key="index">
              <td>{{ index }}</td>
              <td>12</td>
              <td>12</td>
              <td>1</td>
              <td>2</td>
              <td>2</td>
              <td>2</td>
              <td>2</td>
              <td>3</td>
              <td>2</td>
              <td>3</td>
              <td>3</td>
              <td>3</td>
              <td>3</td>
              <td>3</td>
              <td colspan="2">
                <div style="display:flex;width: 100%;height: 100%;">
                  <div style="border-right: 1px solid #eee;width: 50%;">11</div>
                  <div style="width:50%">11</div>
                </div>
              </td>
              <td>4</td>
              <td>5</td>
              <td v-if="showop">6</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
 
<script>
import { reactive, ref } from "vue";

export default {
  setup() {
    const data = [
      {
        1: 40,
        2: 3077,
        3: null,
        4: null,
        5: null,
        6: null,
        7: 2,
        8: 8300,
        9: 0,
        10: null,
        11: null,
        12: null,
        13: "PP11",
        14: 40,
        15: 3000,
        16: 18,
        17: 7,
        18: ["11220303201"],
        19: ["SN25-ZJ-FY1-BF"],
      },
      {
        1: 40,
        2: 3077,
        3: null,
        4: null,
        5: null,
        6: null,
        7: 2,
        8: 8300,
        9: 0,
        10: null,
        11: null,
        12: null,
        13: "PP11",
        14: 40,
        15: 3000,
        16: 18,
        17: 7,
        18: ["11220303201"],
        19: ["SN25-ZJ-FY1-BF"],
      },
      {
        1: 40,
        2: 3077,
        3: null,
        4: null,
        5: null,
        6: null,
        7: 2,
        8: 8300,
        9: 0,
        10: null,
        11: null,
        12: null,
        13: "PP11",
        14: 40,
        15: 3000,
        16: 18,
        17: 7,
        18: ["11220303201"],
        19: ["SN25-ZJ-FY1-BF"],
      },
      {
        1: 40,
        2: 3077,
        3: null,
        4: null,
        5: null,
        6: null,
        7: 2,
        8: 8300,
        9: 0,
        10: null,
        11: null,
        12: null,
        13: "PP11",
        14: 40,
        15: 3000,
        16: 18,
        17: 7,
        18: ["11220303201"],
        19: ["SN25-ZJ-FY1-BF"],
      },
    ];
    const showop = ref(true);
    const colspan = ref(1);
    const printHtml = ref();
    const del = () => {
      showop.value = false;
      colspan.value = 2;
      
      //第一种方法
      // let bodyHtml = window.document.body.innerHTML;
      // window.document.body.innerHTML = printHtml.value.innerHTML;
      // console.log(printHtml.value);
      // window.print();
      // window.document.body.innerHTML = bodyHtml;
      // window.location.reload();

      //第二种方法
      let newWindow = window.open("打印窗口", "_blank");//打印窗口要换成页面的url
      let docStr = printHtml.value.innerHTML;
      newWindow.document.write(docStr);
      newWindow.document.close();
      newWindow.print();
      newWindow.close();
      window.location.reload();
    };
    return {
      colspan,
      showop,
      del,
      data,
      printHtml
    };
  },
};
</script>
 
<style lang="scss" scoped>
.table {
  border: none;
  border-collapse: collapse;
  background: white;
  text-align: center;
  margin-top: 10px;

  thead {
    tr {
      color: white;
      height: 30px;

      th {
        background-color: rgba(255, 140, 45, 0.44);
        min-width: 100px;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 3;
        border: 1px solid rgba(0, 0, 0, 0.1);
      }
    }
  }

  tbody {
    tr {
      height: 30px;
      color: black;

      td {
        border: 1px solid rgba(0, 0, 0, 0.1);
        position: -webkit-sticky;
        position: sticky;
        min-width: 100px;
      }
    }
  }
}
</style>