前端批量导出图片并打包压缩

问题：批量下载图片并压缩在一个文件夹里，导出到本地磁盘

实现思路：

1. 根据url地址，把url地址转化为二进制流，再把二进制流转化为blob格式
2. 然后用jszip压缩文件
3. 最后用file-saver生成文件并保存到本地磁盘

第一步：

export const getArrayBuffer= (url) => {
    return  axios({
        method: "get",
        url,
        responseType: "arraybuffer"
      })
    };

第二步：

import JSZip from "jszip"
import FileSaver from "file-saver";
import {getFile} from './request';

const BaseURL=`https://ikzttp.mypinata.cloud/ipfs/QmYDvPAXtiJg7s8JdRBSLWdgSphQdac8j1YuQNNxcGE1hg/`
export const download = async(start, end)=> {
    const zip = new JSZip();
    const img = zip.folder("images");//文件夹的名字
    for (let i = end; i >= start; i--) {
      const res = await getArrayBuffer(`${BaseURL}${i}.png`);
      img.file(`${i}.png`, res, { base64: true });//文件夹下文件的名字
    }
    zip.generateAsync({ type: "blob" }).then(function (content) {
      FileSaver.saveAs(content, "example.zip");//压缩包的名字
    });
  }

第三步：

<Button onClick={() => download(0, 9)}>0-9</Button>

知识点1:FileSaver的使用方法

import FileSaver from "file-saver";

function sayHello() {
    var blob = new Blob(["Hello, world!"], {
      type: "text/plain;charset=utf-8"
    });
    FileSaver.saveAs(blob, "hello world.txt");//把blob格式的内容导出到本地磁盘
  }

知识点2:JSZip的使用—>githubhttps://github.com/Stuk/jszip#readme

const zip = new JSZip();

zip.file("Hello.txt", "Hello World\n");//创建一个文件，文件名：Hello.txt；文件内容：Hello World

const img = zip.folder("images");//创建一个文件夹，文件夹的名字：images
img.file("smile.gif", imgData, {base64: true});//在文件夹中创建一个文件，文件名：smile.gif;文件内容：base64格式的图片

//生成blob格式的内容，然后用saveAs把blob格式的内容导出到本地磁盘
zip.generateAsync({type:"blob"}).then(function(content) {
    // see FileSaver.js
    saveAs(content, "example.zip");
});

结果：
/*
Results in a zip containing--->导出一个包含一下内容的压缩包
Hello.txt   ------------------>压缩包里包含一个Hello.txt文件
images/----------------------->压缩包里包含一个images文件夹
    smile.gif----------------->images文件夹下有一个smile.gif的图片
*/