一招搞定，轻松批量下载二维码！

2023-07-30 10:03:54

批量下载二维码的全面指南

一、简介

在前端开发中，经常需要将多个 URL 转化为二维码，并统一打包下载。本文将介绍如何利用 JavaScript 库 qrcode 和 jszip 实现此需求，并提供 React 前端实现的代码示例。

二、生成二维码

安装 qrcode 库：npm install qrcode。
创建 qrcode 对象并传入要转换的 URL。
将生成的二维码 URL 保存起来。

代码示例：

import qrcode from "qrcode";

const qr = new qrcode();
qr.toDataURL("https://example.com", function (err, url) {
  // 保存二维码 URL
});

三、打包二维码

安装 jszip 库：npm install jszip。
创建 jszip 对象。
使用 file 方法将二维码 URL 作为 base64 数据添加到 ZIP 文件中。
生成 ZIP 文件并保存。

代码示例：

import JSZip from "jszip";

const zip = new JSZip();
zip.file("qrcode.png", qrcodeURL, {base64: true});
zip.generateAsync({type: "blob"}).then(function (content) {
  // 保存 ZIP 文件
});

四、React 前端实现

安装 qrcode 和 jszip 库。
创建 React 组件来接收 URL 列表。
使用 qrcode 库生成二维码，并将它们添加到 jszip 对象中。
提供一个按钮来下载 ZIP 文件。

代码示例：

import React, { useState } from "react";
import { Button, Input } from "antd";
import qrcode from "qrcode";
import JSZip from "jszip";

const App = () => {
  const [urls, setUrls] = useState([]);
  const [loading, setLoading] = useState(false);

  const handleInputChange = (e) => {
    const newUrls = e.target.value.split("\n");
    setUrls(newUrls);
  };

  const handleDownloadClick = () => {
    setLoading(true);

    const zip = new JSZip();
    urls.forEach((url) => {
      qr.toDataURL(url, function (err, qrcodeURL) {
        zip.file("qrcode.png", qrcodeURL, {base64: true});
      });
    });

    zip.generateAsync({type: "blob"}).then(function (content) {
      setLoading(false);
      // 保存 ZIP 文件
    });
  };

  return (
    <div>
      <Input.TextArea placeholder="请输入需要下载的 URL，每行一个" onChange={handleInputChange} />
      <Button type="primary" onClick={handleDownloadClick} loading={loading}>
        下载二维码
      </Button>
    </div>
  );
};

export default App;