利用jszip实现批量文件压缩下载

介绍

前端可以通过一个第三方库 jszip，可以把多个文件以blob、base64或纯文本等形式，按自定义的文件结构，压缩成一个zip文件，然后通过浏览器download下来。
官网：stuk.github.io/jszip/ 用法不难，直接看code：

// 先封装一个方法，请求返回文件blob
async function fetchBlob(fetchUrl, method = "POST", body = null) {
    const response = await window.fetch(fetchUrl, {
        method,
        body: body ? JSON.stringify(body) : null,
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json",
            "X-Requested-With": "XMLHttpRequest",
        },
    });
    const blob = await response.blob();
    return blob;
}

const zip = new JSZip();
zip.file("Hello.txt", "Hello World\n"); // 支持纯文本等

zip.file("img1.jpg", fetchBlob('/api/get/file?name=img.jpg', 'GET')); // 支持Promise类型，需要返回数据类型是 String, Blob, ArrayBuffer, etc
zip.file("img2.jpg", fetchBlob('/api/post/file', 'POST', { name: 'img.jpg' })); // 同样支持post请求，只要返回类型正确就行

const folder1 = zip.folder("folder01"); // 创建folder
folder1.file("img3.jpg", fetchBlob('/api/get/file?name=img.jpg', 'GET')); // folder里创建文件

zip.generateAsync({ type: "blob" }).then(blob => {
    const url = window.URL.createObjectURL(blob);
    downloadFile(url, "test.zip");
});

jszip还支持一些别的类型文件压缩，比如纯文本、base64、binary等等，详见：https://stuk.github.io/jszip/documentation/api_jszip/file_data.html
由于走的是纯前端压缩，所以会有延迟问题，走到最后download时才会调起浏览器下载，所以页面可能需要一个效果来更新压缩进度。zip.generateAsync方法就支持第二个参数，支持进度更新：

zip.generateAsync({ type: "blob" }, metadata => {
    const progress = metadata.percent.toFixed(2); // 保留2位小数
    console.log(metadata.currentFile, "progress: " + progress + " %");
}).then(blob => ... );

方案三：后端压缩成zip，然后以文件流url形式，前端调用download
后台加个api，然后把需要download的文件在后台压缩成zip，然后把文件流输出出来。然后就和单个文件download一样了。

因为后台会先压缩，会有延迟才会把blob返回前台，而且需要传多个文件信息，一般是post请求，所以建议使用单个文件下载的方案三通过API请求实现，在请求前后加上提示语或loading效果。

总结

本文介绍了前端单个文件的下载方案，以及批量多个文件下载的解决方案。最后整理下方案建议：

单个文件下载：

如果url是同源的，并且是一个服务器上的静态文件路径、或者是一个get请求，推荐方案二即 方式下载。
反之，方案三即API请求方式。
批量文件下载：

如果有zip压缩需求，选方案二或方案三;
如果可以接受弹Download multiple files提示，用方案一；反之方案二或方案三;
https://www.jb51.net/article/276668.htm#_lab2_2_4