vue3项目局部打印功能实现

局部详情打印功能我们需要借助 vue-print-nb，所以首先我们需要下载该插件

npm i vue3-print-nb@0.1.4

然后利用该工具完成下载功能：

0. 指定 printLoading

   <el-button type="primary" :loading="printLoading">打印</el-button>
   ​
   // 打印相关
   const printLoading = ref(false)
   

1. 创建打印对象

   const printObj = {
     // 打印区域
     id: 'userInfoBox',
     // 打印标题
     popTitle: 'admin-vue3-vite',
     // 打印前
     beforeOpenCallback(vue) {
       printLoading.value = true
     },
     // 执行打印
     openCallback(vue) {
       printLoading.value = false
     }
   }
   

2. 指定打印区域 id 匹配

   <div id="userInfoBox" class="user-info-box">
   

3. vue-print-nb 以指令的形式存在，所以我们需要创建对应指令

4. 新建 directives 文件夹，创建 index.js

5. 写入如下代码

   import print from 'vue3-print-nb'
   ​
   export default app => {
     app.use(print)
   }
   ​
   

6. 在 main.js 中导入该指令

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

7. 将打印指令挂载到 el-button 中

     <el-button type="primary" v-print="printObj" :loading="printLoading">打印</el-button>