VUE项目利用vue-print-nb插件进行页面打印

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

它的用法是：

安装

$ npm i vue-print-nb

首先注册该插件

import Print from 'vue-print-nb' Vue.use(Print);// 内部就是定义了一个自定义指令 
v-print="{id:需要打印dom的id}",而且不需要再写点击事件

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

template>
    <div>
           <div :id="id" >    
　　　　　　<p>要打印的内容</p>
　　   </div>    
           <el-row type="flex" justify="end">
               <el-button v-print="printObj" size="small" type="primary">打印</el-button>
          </el-row>
    </div>
  </template>

  <script>
    export default {
     data () {
          return {
      printObj: {
          id: 'myPrint'
           }
        }
      }
    } 
   </script> 

最终，我们看到的效果