vue3-print-nb 实现页面多table打印

vue3-print-nb 是一个基于 Vue3 的多页表格打印插件。它支持多表格同时打印，表格大小和位置的自定义，还可以设置表格的样式、标题、页眉页脚等。使用 vue3-print-nb 插件可以方便地实现页面多 table 打印。

具体使用方法如下：
1. 安装 vue3-print-nb 插件：在项目目录下执行 npm install vue3-print-nb 命令进行安装；
2. 引入 vue3-print-nb 插件：在需要使用的组件中，使用 import 引入 vue3-print-nb 插件；
3. 在组件中使用插件：在组件的 template 中添加需要打印的 table 内容，并在 script 中调用插件的打印方法。

下面是一个示例代码：

<template>
  <div>
    <table class="table">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>小明</td>
          <td>20</td>
          <td>男</td>
        </tr>
        <tr>
          <td>小红</td>
          <td>22</td>
          <td>女</td>
        </tr>
      </tbody>
    </table>
    <table class="table">
      <thead>
        <tr>
          <th>姓名</th>
          <th>学科</th>
          <th>成绩</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>小明</td>
          <td>数学</td>
          <td>90</td>
        </tr>
        <tr>
          <td>小明</td>
          <td>英语</td>
          <td>80</td>
        </tr>
        <tr>
          <td>小红</td>
          <td>数学</td>
          <td>85</td>
        </tr>
        <tr>
          <td>小红</td>
          <td>英语</td>
          <td>90</td>
        </tr>
      </tbody>
    </table>
    <button @click="printTable">打印表格</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import Print from 'vue3-print-nb'

export default defineComponent({
  components: {
    Print
  },
  methods: {
    printTable() {
      // 打印所有表格
      this.$refs.print.print()
    }
  }
})
</script>

以上示例代码中，通过引入 vue3-print-nb 插件，定义了一个组件，包含两个 table 表格和一个打印按钮。当点击按钮时，通过调用 printTable 方法，执行 $refs.print.print() 方法打印所有表格。