vue3-print-nb打印表格

以下是使用vue3-print-nb打印表格的示例：

1. 首先，确保已经安装了vue3-print-nb依赖包。

2. 在需要打印表格的组件中，引入vue3-print-nb：

import print from 'vue3-print-nb'

3. 在Vue应用的入口文件（main.js）中，使用vue3-print-nb插件：

const app = createApp(App)
app.use(print)
app.mount('#app')

4. 在需要打印表格的组件中，使用vue3-print-nb提供的打印方法。例如，在一个名为PrintTable的组件中，有一个名为tableData的表格数据：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="printTable">打印表格</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20, gender: '男' },
        { id: 2, name: '李四', age: 25, gender: '女' },
        { id: 3, name: '王五', age: 30, gender: '男' }
      ]
    }
  },
  methods: {
    printTable() {
      this.$print({
        title: '表格打印',
        content: '#table'
      })
    }
  }
}
</script>

在上述示例中，我们创建了一个包含表格和打印按钮的组件PrintTable。当点击打印按钮时，调用printTable方法，通过this.$print方法打印表格。其中，title为打印页面的标题，content为需要打印的内容的选择器，这里我们选择了整个表格的选择器#table。