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

最新推荐文章于 2024-08-16 16:55:01 发布

悰零

最新推荐文章于 2024-08-16 16:55:01 发布

阅读量2.4k

点赞数 2

分类专栏： react 前端 js 文章标签： react canvas jszip html2canvas

本文链接：https://blog.csdn.net/kalene992/article/details/109732748

版权

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

摘要由CSDN通过智能技术生成

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

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

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

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

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

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:

最低0.47元/天解锁文章