日常我们经常需要点击按钮进行信息打印,比如员工信息表,个人信息等,但是通过浏览器的右键打印会打印整个网页,选中打印呢又存在各种各样的问题,怎么能通过点击打印打印固定区域信息内容呢?

首先，打印功能我们借助一个比较流行的插件

安装

$ npm i vue-print-nb

注册

import Print from 'vue-print-nb'
Vue.use(Print);

使用v-print指令的方式进行打印

 <el-row type="flex" justify="end">
          <el-button v-print="printObj" size="small" type="primary">打印</el-button>
   </el-row>
   printObj: {
        id: 'myPrint'  //这里的id指的是打印的区域,id选择器
   }

最终实现效果如下: