干货：

纯前端 vue项目生成二维码并打包成压缩包

内容：

本文部分代码复制的这个博主：https://blog.csdn.net/GYF857590256/article/details/113565659 小弟斗胆精简一些代码，希望大家能用得更顺手，更多的会解释一些代码的含义，

vue的组件安装我就不说了，大概就是这几个：html2canvas(vue生成图片插件,但是在uniapp，小程序里面生成的图片会不清晰)，qrcodejs2(生成二维码的插件)，jszip(生成zip文件的插件)，file-saver(保存的插件)

html部分：

<template lang="">
  <div>
    <div id="qrcode" class="code" ref="qrCodeDiv"  v-show="firstFlag">
    <div v-for="(item, index) in list" :key="index" :id="'captureId'+index" class="invitationCode">
      <div class="codeImgbox" ref="BoxImgContent" :id="'codeImgbox' + index"></div>
    </div>
    </div>
    <div v-show="!firstFlag">
      <img class="code_img" :src="canvasImageUrl" alt />
    </div>
  </div>
</template>

js部分：

import html2canvas from 'html2canvas'
import QRCode from 'qrcodejs2'
import JSZip from "jszip"
import FileSaver from 'file-saver';
export default { 
  data () { 
    return { 
      firstFlag: true,// 用于控制dom的显隐
      canvasImageUrl: "",  // html2canvas 生成的图片链接
      list: [],
      stationCanvas: []
    };
  },
  mounted () { 
    // 不一定要放在这个生命周期，写成函数也行！！！
    // 因为工作需求生成100个二维码前面地址不变但是后面序号改变 所以用了这样的方式生成了一个数组，
    // 一般批量生成基本上这种循环就可以解决，当然，如果你有一个表格的数据需要生成二维码 只要数组的格式为：
    // [{url:'http:......',name:'',imgSrc:''},{url:'http:......',name:'',imgSrc:''}.....]
    // 这种格式就行，解析表格的话可以找后端协助返回给你数组也行
    for (let index = 10000001; index < 10000101; index++) { 
      this.list.push({ 
        url: 'http://xxxxxx.html' + index, // 二维码的地址
        name: index, // 设置每一个二维码的文件名
        imgSrc: ''// 生成的二维码放图片的字段
      })
    }
    // 这边的循环是在生成对应上方数组数量的二维码，方法有点笨，有前辈话可以提一下建议
    // 这一步非常慢，有待优化
    this.list.forEach((element, index) => { 
      this.$nextTick(function () { 
        this.qrcode(element.url, index)
      });
    });
    this.firstFlag = false;
    this.$nextTick(function () { 
      this.packageImages(); // 二维码生成后，执行生成图片，并打包
    });
  },
  methods: { 
  // qrcode 的使用
    qrcode (data, index) { 
    // data,index 是传过来的值，不用多说
      new QRCode(this.$refs.qrCodeDiv.children[index].children[0], { 
      // this.$refs.qrCodeDiv.children[index].children[0] 这个是dom选择器，选择对应的dom生成二维码
        width: 300, // 二维码的宽
        height: 300, // 二维码的高
        text: data, // 二维码地址
        colorDark: "#000",// 二维码颜色
        colorLight: "#fff"// 二维码背景色
        // 这里 生成的二维码可能样式达不到预期要求，文后在说一说怎么调节
      });
    },
    // 打包图片成压缩包的函数
    packageImages () { 
    // 初始化stationCanvas 
      this.stationCanvas = [];
      // 循环每一个类名为invitationCode的dom元素
      document.getElementsByClassName('invitationCode').forEach((item, index) => { 
      // 使用html2canvas 截取这个dom 并生成图片
        html2canvas(document.querySelector("#captureId" + index)).then((canvas) => { 
          const url = canvas.toDataURL(); // 生成的图片
          
          const Obj = { 
            // invitationCode这个dom的内容，可以打印（item）看一看
            url: item.children[0].getAttribute('title'), 
            src: url, 
          };
          this.list.forEach((item1) => { 
          // 判断内容是否相等,相等的一个item1下面的imgSrc就等于invitationCode这个dom下面生成的图片的base64
            if (item1.url === Obj.url) { 
              item1.imgSrc = item.children[0].children[1].getAttribute('src');
            }
          });
          // 然后添加到这个数组里面
          this.stationCanvas.push(url);
          // 判断 this.stationCanvas 这个数组是否等于我们的原数组，也就是循环走到最后一个时，批量处理文件
          if (this.stationCanvas.length === this.list.length) { 
            const zip = new JSZip();  // 压缩的插件方法
            const cache = { };
            const arr = this.list;
            arr.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');//这里设置压缩包的名称
            });
          }
        }).catch(error => {  });
      });
    },
  }
}

如果想修改二维码的样式 可以尝试找一下 找到 “node_modules/qrcodejs2/qrcode.js”
找到这段代码，修改你想要的样式，我这里加了margin = 5px

var Drawing = function (el, htOption) { 
      this._bIsPainted = false;
      this._android = _getAndroid();

      this._htOption = htOption;
      this._elCanvas = document.createElement("canvas");
      this._elCanvas.width = htOption.width;
      this._elCanvas.height = htOption.height;
      this._elCanvas.style.margin = "5px";// 自己加的一段
      el.appendChild(this._elCanvas);
      this._el = el;
      this._oContext = this._elCanvas.getContext("2d");
      this._bIsPainted = false;
      this._elImage = document.createElement("img");
      this._elImage.alt = "Scan me!";
      this._elImage.style.display = "none";

      this._el.appendChild(this._elImage);
      this._bSupportDataURI = null;
    };

胡言乱语：

这个不算是项目需求，只是公司在发展业务时需要打印二维码，但是打印店不支持给他们表格，然后按照表格内容打印，公司就让我们去网上找二维码生成的工具，但是大部分工具要么就是单张生成(作为程序员肯定受不了,这要弄一百张得弄吐)，要么就是批量生成的二维码扫出来后还加了层壳，不能直接访问，例如(某料)，然后就自己开始琢磨这个东西，然后就弄出来了。