步骤一:下载安装插件
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>
上述代码是为了实现一个页面展示多个二维码,并且每一个二维码都有一个打印,效果如下