Vue批量生成二维码并分页打印，组件形式实现

一. 最终效果

二. 实现方式

1. 安装qrcodejs2插件；

// 终端执行
npm install qrcodejs2 --save

2. 创建对应二维码生成及打印组件

组件代码:

<template>
 <div id="qrCodeDiv" style="display:none;">
   <!-- 使用css样式对生成的二维码打印时定义了分页 -->
   <div v-for="(qrCode,index) in qrCodeList" :key="index" style="display: flex;justify-content: center;page-break-after:always;flex-direction: column;align-items: center;">
     <!-- 这个div承载了每个二维码实例,必须定义 -->
     <div :id="'qrCode'+ index"></div>
      <!-- 自定义内容 -->
     <div style="margin: 10px 0;">{
   
   {qrCode.name}}({
   
   {qrCode.code}})</div>
   </div>
 </div>  
</template>

<script>
//引入插件
import QRCode from 'qrcodejs2'
export default {
      
      
 data() {
      
      
   return {
      
      
     /* 二维码扫描出的访问地址  http://XXX */
     url:"http://127.0.0.1/assets/preview?assetsId=",
     /* 放置所有的二维码 */
     qrCodeList:[]
   }
 },
 methods:{
      
      
   /* 父组件调用该方法传入对应的集合 */
   printQrCode(qrCodeList){
      
      
     //每次渲染前清除上一次渲染的二维码
     for (let index = 0; index < this.qrCodeList.length; index++) {
      
      
       const domId = "qrCode" + index;
       document.getElementById(domId).innerHTML = "";
     }
     this.qrCodeList = qrCodeList;
     this.$nextTick(() => {
      
      
       //构建新网页(关键步骤,必须先构建新网页,在生成二维码,否则不能显示二维码)
       var newWin = window.open(""); //新打开一个空窗口
       let new_str = document.getElementById("qrCodeDiv").innerHTML; 
       newWin.document.body.innerHTML = new_str;
       for (let index = 0; index < this.qrCodeList.length; index++) {
      
      
         const id = this.qrCodeList[index].id;
         this.qrCode('qrCode' + index,this.url + id);
         this.qrCode(newWin.document.getElementById('qrCode' + index),this.url + id);
       }
       newWin.print(); //打印刚才新建的网页
       newWin.close(); //打印或取消后关闭弹出的网页
     })
   },
   /* 构建二维码 */
   qrCode(id,content,w,h){
      
      
     new QRCode(id, {
      
      
       width: w || 124,
       height: h || 124,
       text: content  // 二维码内容
       // render: 'canvas' , // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
       // background: '#f0f', // 背景色
       // foreground: '#ff0' // 前景色
     })
   }
 }
}
</script>

3. 父组件调用方式

在父组件中引入刚刚封装好的组件并注册。将组件放置在<template>标签中，并定义ref

先组装对应的二维码数组，最后组装出来的数据格式为

//可以根据自己的业务需求去改变结构，这个数组的作用主要是为了生成二维码时需要数据id拼接二维码访问地址
let qrCodeArr = [
  {
    
    
  	id:328471,
  	name:"傲风电竞椅"，
  	code:"AOFU-001"
  }，
  {
    
    ....},
  ....
]

点击事件触发该方法

接下来只要通过按钮绑定该方法，触发即可。