【一键生成二维码，导出所有二维码图片的压缩包】

1.导入所需JavaScript 库。

import QRCode from ‘qrcodejs2’----------(npm install qrcodejs2)
import JSZip from “jszip”----------(npm install jszip)
import FileSaver from ‘file-saver’----------(npm install file-saver)

2.组件化开发新建一个vue文件。

3.父组件引用。

页面加个操作按钮

<AsetQrcodes ref="qrcode"/>
<el-button type=“primary” class=“SearchBtn” size=“small” @click=“printQrcode” >批量下载二维码

引用组件

import AsetQrcodes from “@/components/AsetQrcodes”;
components:{
AsetQrcodes
},

写方法

//批量打印二维码
printQrcode(){
//假数据
let arr = [
{id:1,name:“33333”,code:“1”},
{ id:2,name:“2222”,code:“2”},
…
]
//调用子组件打印
this.$refs.qrcode.printQrCode(arr)
},

子组件（直接复制引用，特别的好用）

<template>
  <div id="qrCodeDiv" style="display:none;">
    <!-- 使用css样式对生成的二维码打印时定义了分页 -->
    <div v-for="(qrCode,index) in qrCodeList" :key="index" style="width: 25%;float: left;justify-content: 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'
import JSZip from "jszip"
import FileSaver from 'file-saver'
export default {
  data() {
    return {
      /* 二维码扫描出的访问地址  http://XXX */
      url:"http://www.baidu.com?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(() => {
        let imgZip = []
        for (let index = 0; index < this.qrCodeList.length; index++) {
          const id = this.qrCodeList[index].id;
          this.qrCode('qrCode' + index,this.url + id);
          // //找到canvas标签
          let myCanvas = document.getElementById('qrCode' + index).getElementsByTagName('canvas');
          // //设置a标签的href属性（将canvas变成png图片）
          let obj={
            imgSrc:myCanvas[0].toDataURL('image/jpg'),
            name:this.qrCodeList[index].name
          }
          imgZip.push(obj)
        }
        const zip = new JSZip();  // 压缩的插件方法
        const cache = {};
        imgZip.forEach((item) => {
          const fileName = item.name;
          zip.file(`${fileName}.png`, item.imgSrc.substring(22), { base64: true });
          cache[fileName] = item.imgSrc;
        });
        // 打包
        zip.generateAsync({ type: 'blob' }).then((content) => {
          FileSaver.saveAs(content, '二维码.zip');//这里设置压缩包的名称
        })
      })
    },
    //base64转blob
    base64ToBlob(code) {
      let parts = code.split(';base64,');
      let contentType = parts[0].split(':')[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;
      let uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], {type: contentType});
    },
    /* 构建二维码 */
    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>

点赞评论吧。。。。。。。。。。。。