开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情

前言

打印功能十分常见，项目中可能需要对个人信息等内容进行打印，在浏览器中点击右键也可以打印

但是这种方式会对页面全部打印

而我们通常需要对某块区域进行局部打印，所以这种方式比较麻烦。

在打印的基础上指定某块视图的打印，可以使用一个第三方包vue-print-nb来实现

vue-print-nb

vue-print-nb是以指令方式使用

安装

npm i vue3-print-nb@0.1.4

注意使用不同的vue版本需要不同的安装命令，我这里使用的是vue3

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')

局部注册

import print from 'vue3-print-nb'

directives: {
    print   
}

实现

新建directives/index.js,导出方法注册vue-print-nb

import print from 'vue3-print-nb'

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

在main.js中导入指令

import installDirective from '@/directives'

installDirective(app)

为打印按钮绑定printLoading缓冲效果

      <el-button type="primary" :loading="printLoading">
        {{ $t('msg.userInfo.print') }}
      </el-button>

import { ref } from 'vue'

const printLoading = ref(false)

创建并配置打印对象

id: 打印视图区域的id
popTitle: 打印的标题
beforeOpenCallback(): 打印前的回调函数
openCallback(): 打印后的回调函数
···

配置还有很多，暂时使用的有这四个，更多请前往官网查看

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

将打印区域的id匹配

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

最后将打印指令挂载到打印按钮中即可

      <el-button type="primary" :loading="printLoading" v-print="printObj">
        {{ $t('msg.userInfo.print') }}
      </el-button>

效果图如下

可以看到只打印了id对应视图的部分

局部打印功能

前言

vue-print-nb

全局注册

局部注册

实现