react html2canvas 批量生成canvas，转成base64图片，jszip 打包压缩包后下载

记项目实现需求，转react实现：根据获取的数据，转化成图片然后打包压缩后自动下载

根据需求，分析需求，获得基本的实现步骤：

1. 获取数据
2. 把数据转成一个个div，然后转成 canvas（因为canvas是通过指定的 DOM 来生成的，所以我会先转成div）
3. 通过 html2canvas 生成 base64 图片
4. 通过 jszip 把所有 base64 图片 添加到实例中，生成zip 文件， 生成 a 链接，模拟点击下载链接进行自动下载

接下来，就看一下以上的步骤应该如何通过 react 来实现。

1. 首先是获取数据，获取数据比较简单，就是直接请求数据然后记录下来，假设现在获取到的数据是(以下数据都是自己在网上找回来的假数据)

const dataJSON = [
  {
   
    id: "1",
    cnName: "水元素",
    jpName: "ウォーター·エレメント",
    enName: "Water Element",
    cardType: "通常怪兽",
    race: "水",
    attribute: "水",
    stars: "3",
    ATK: "900",
    DEF: "700",
    rarity: "平卡N",
    description: "住在水里的精灵。将四周用雾包围妨碍敌人的视线。",
  },
  {
   
    id: "2",
    cnName: "元素恶魔",
    jpName: "エレメント·デビル",
    enName: "Element Doom",
    cardType: "效果怪兽",
    race: "恶魔",
    attribute: "暗",
    stars: "4",
    ATK: