后端传给前端图片的url，react使用JSZip库批量下载图片

最近项目中有个需求就是可以让用户选择图片下载为zip。

在网上搜索了资料发现jszip这个库可以解决这个需求。

首先我们需要先下载这个库

npm install jszip

然后我们还需要下载一个库file-saver，它可以帮我们把文件下载到本地

npm install file-saver

先看官方案例

import JSZip from 'jszip';
import FileSaver from 'file-saver';
var zip = new JSZip();
 
//创建一个内容含有Hello World的文件名为hello的txt文件
zip.file("hello.txt", "Hello World\n"); 
 
//创建一个sample文件夹，文件里里创建一个hello.txt文件，文件内容为Hello World
zip.folder("sample").file("hello.txt", "Hello World\n"); 

zip.generateAsync({type:"blob"}).then(function(content) {
    // 把文件下载到本地，压缩包名为zipname.zip
     FileSaver.saveAs(content, `zipname.zip`);
});

这个案例是创建一个zipname.zip的压缩包，压缩包中有一个文件夹叫sample，sample文件夹中有一个hello.txt的文本文件。这就是基础的使用了。

回到需求中，如果后端传回了关于图片的url地址(因为图片一般都是存储在服务器中的)，那么我们该如何下载这张图片呢？

1.拿到到后端传给我们的图片的url。

2.讲url对应的图片的转为流的形式，可以是bufferArray，base64等等。

3.仿照下面的代码进行操作。

import JSZip from 'jszip';
import FileSaver from 'file-saver';

const downLoad = async()=>{
    const zip = new JSZip();
    for(let i = 0;i<imageList.length;i++){
        //imageList是后端返回的数组
        //通过每个图片对应的id，拿到该图片并获取到对应的ArrayBuffer
        const imageResponse = await getImageArrayBuffer(imageList[i].Id);
        zip.file(imageList[i].fileName,imageResponse);
    }
    zip.generateAsync({type:'blob'}).then((content)=>{
      FileSaver.saveAs(content,'image.zip')
    });
}