字符串生成二维码并且批量打包下载

所需依赖包

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返回对象是promise
async () => {
  // 二维码字符串相关的数据
  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);
};