vue打印文件使用 v-print 并且实现一个页面多个打印

步骤一：下载安装插件

npm install vue-print-nb --save

步骤二：main.js中引入组件

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

步骤三：HTML部分

 <li  v-for="(item,index) of  qrCodeList" :key="index" style="margin: 0 auto"   >
           <div :id="item.desc">
             <div>
               <span v-if="teamQrcode==='room'" style="text-align: left;display: inline-block;width: 70px;">房间号：</span>
               <span v-else-if="teamQrcode==='guest'" style="text-align: left;display: inline-block;width: 70px;">宾客姓名：</span>
               <span style="text-align: center">{{item.info}}</span>
             </div>
             <div v-if="teamQrcode==='room'" style="margin-top: 10px">
               <span style="text-align: left">是否已住：</span>
               <span v-if="item.is_check_in===0" style="color: #F56C6C;text-align: center" >否</span>
               <span v-else style="color: #67C23A;text-align: center" >是</span>
             </div>
             <div :id="item.id" :ref="item.id" style="display: inline-block;margin: 10px auto;"></div>
           </div>

           <div>
             <el-button type="primary" plain   v-print="'#'+item.desc"  size="small"  >打印</el-button>
           </div>

         </li>

上述代码是为了实现一个页面展示多个二维码，并且每一个二维码都有一个打印，效果如下