局部打印

打印逻辑分为两部分：

1. 以表格的形式展示打印的数据
2. 打印详情表格
   其中 以表格的形式展详细数据 部分我们需要使用到 el-descriptions 组件，并且想要利用该组件实现详情的表格效果还需要一些小的技巧

而 打印详情表格 的功能就是建立在展示详情页面之上的

当我们在浏览器右键时，其实可以直接看到对应的 打印 选项，但是这个打印选项是直接打印整个页面，不能指定打印页面中的某一部分的。

所以说 打印是浏览器本身的功能，但是这个功能存在一定的小缺陷，那就是 只能打印整个页面

而我们想要实现 详情打印，那么就需要在这个功能的基础之上做到指定打印具体的某一块视图，而这个功能已经有一个第三方的包 vue-print-nb 帮助我们进行了实现，所以我们只需要使用这个包即可完成打印功能

那么明确好了原理之后，接下来步骤就呼之欲出了：

1. 获取详情数据
2. 在详情页面，渲染详情数据
3. 利用 vue-print-nb 进行局部打印

局部详情打印功能我们需要借助 vue-print-nb

1. 安装

npm i vue3-print-nb@0.1.4

2. 全局引入

src/directives/index.js:

import print from 'vue3-print-nb'

export default app => {
  app.use(print)
}

main.js:

import installDirective from '@/directives'
installDirective(app)

3. 使用

// 通过v-print指令调用vue3-print-nb生成的打印对象
<el-button type="primary" v-print="printObj" :loading="printLoading">
{{        $t('msg.userInfo.print')    }}
</el-button>

<script>
// 打印相关
const printLoading = ref(false)
const printObj = {
  // 通过id指定实现局部打印
  id: 'userInfoBox',
  // 打印标题
  popTitle: 'admin',
  // 打印前
  beforeOpenCallback(vue) {
    printLoading.value = true
  },
  // 执行打印
  openCallback(vue) {
    printLoading.value = false
  }
}
</script>