Vue实现打印功能

第一步 安装打印插件

npm install vue-print-nb --save

第二步 在main.js中进行引入

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

第三步 给需要打印的区域添加id，然后再添加一个打印按钮为按钮添加 v-print 属性，属性的值就是’#+id’

<div class="symContainer" id="printArea">
      <div class="sym-tit">
        萧县永堌镇窦庄葡萄溯源平台
      </div>
      <ul class="symInfo">
        <li>产品名称：萧县永堌镇窦庄葡萧县永堌镇窦庄葡</li>
        <li>生产日期：2020-06-05</li>
        <li>企业电话：18888888888</li>
        <li>溯源码：1100K620174130</li>
      </ul>
      <div class="sym" id="qrcode" ref="qrcode"></div>
  </div>
    <el-button type="primary"  v-print="'#printArea'">打 印</el-button>

然后就可以实现打印功能了，点击打印按钮直接唤起打印功能。非常简单好用，下面附上效果图，我这里用的是element-UI做的溯源码打印界面。