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

本文介绍了如何在React项目中利用html2canvas将数据转化为canvas,再转换为base64图片,并用jszip打包成zip文件实现自动下载。详细步骤包括获取数据、创建div、生成canvas、转成图片、使用jszip打包和模拟下载。
摘要由CSDN通过智能技术生成

记项目实现需求,转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:
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值