所需依赖包

  1. qrcode 二维码生成的插件库
  2. jszip 用来打包压缩的一个库
  3. file-saver 文件保留下载的插件库

思路

  1. qrcode 能间接将字符串生成二维码图片的 base64 格局
  2. 将二维码图片的 base64 整合放入到 JSZip 对象里
  3. 最初生成 zip 文件并通过 file-saver 下载到本地

次要代码

1.头部引入

import JSZip from "jszip";import FileSaver from "file-saver";import QRCode from "qrcode";

2.函数办法

/** * 将字符串生成二维码并且转成base64 * @param {要生成二维码的字符串} text * @returns */function textQrcodeToBase64(text) {  return new Promise((res, rej) => {    QRCode.toDataURL(      text, // 二维码字符串      {        type: "image/png", // 生成dataurl图片格式        width: 200, // 二维码宽度        quality: 0.8, // 品质        margin: 1, // 白边大小        color: {          dark: "#000", // 暗色色彩          light: "#fff", // 亮色色彩        },      },      function (err, dataUrl) {        if (err) rej(err);        res(dataUrl.substring(22)); // substring(22)是去掉图片base64头      }    );  });}/** * 将base64字符串以png格局装进jszip, 而后下载保留到本地 * @param {Array} data {value: base64字符串, name: 二维码的名字} */function dataUrlZip(data) {  const zip = new JSZip();  for (const item of data) {    const { value, name } = item;    zip.file(name + ".png", value, {      base64: true,    });  }  // 以二进制模式保留、并且通过file-saver下载到本地  zip.generateAsync({ type: "blob" }).then(function (content) {    FileSaver.saveAs(content, "qrcodes.zip");  });}

3.应用

// 留神: textQrcodeToBase64返回对象是promiseasync () => {  // 二维码字符串相干的数据  const qrStrArr = [    { name: "baidu", url: "http://www.baidu.com" },    { name: "npm", url: "https://www.npmjs.com/" },  ];  // 生成下载数据  const data = [];  for (const item of qrStrArr) {    const base64 = await textQrcodeToBase64(item.url);    data.push({      name: item.name,      value: base64,    });  }  // 下载  dataUrlZip(data);};