关于前端:字符串生成二维码并且批量打包下载

所需依赖包

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);
};