三.Vue打印页面

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

npm i vue-print-nb | yarn add 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>
   data() {
       return {
           printObj: {
                id: 'myPrint'
           }
       }
   }
复制代码

• v-print需要传入一个参数，这个参数是一个id，你想打印那个盒子里的内容，你就把这个id给到那个盒子，我们可以在data中用一个对象对多个id进行统一管理