共计 1443 个字符，预计需要花费 4 分钟才能阅读完成。
最近在做一个文件下载的功能，这里把做的过程中用的技术和坑简要总结下。上篇文章《通过 JavaScript 下载文件到本地（单文件）》说了下如何下载单文件，这篇主要说下如何做多文件的批量下载
多文件分别处理
如果文件数量可控，对于下载出来的文件格式无要求，可以用最简单的办法，直接遍历文件，分别给每个下载链接创建一个单文件的 download 或者 iframe 下载链接。
zip 包批量下载
虽然说可以遍历所有文件，然后去批量下载单个文件，但是这种体验毕竟不太好，最常见的做法是把批量的文件下载并打包到 zip 中。
所以首先的一个实现思路是：在代理服务里，先去遍历所有的文件去请求文件数据, 然后压缩到 zip 包中，然后再把 zip 包返回给客户端。
这么做对于下载量数据比较小时 ok，但是如果批量文件特别多特别大时，用户要等后台把所有的数据都请求到并且都打包都压缩包里，前端才能有反馈，这个时间可能会耗时很长，用户体验可能很差。
在同事的前期调研时，有说这里可以做一个流式的边压缩边下载的能力，大致的思路是，chunk 回包，加流式压缩。
……
let fileCounter = 0;
const zippedFilename = encodeURIComponent(downloadData.name);
const list = downloadData.list || [];
const header = {
‘Content-Type’: ‘application/x-zip’,
‘Pragma’: ‘public’,
‘Expires’: ‘0’,
‘Cache-Control’: ‘private, must-revalidate, post-check=0, pre-check=0’,
‘Content-disposition’: ‘attachment; filename=”‘ + zippedFilename + ‘”‘,
‘Transfer-Encoding’: ‘chunked’,
‘Content-Transfer-Encoding’: ‘binary’
};
res.writeHead(200, header);
archive.store = true;
archive.pipe(res);
list.map(item => {
fileCounter++;
let inStream = request.get(item.downLoadUrl);
let name = item.fileName;
let length = 0;
inStream.on(‘response’, function(awsData) {
archive.append(inStream, {
name: name
});
}).on(‘data’, function(data) {
length += data.length;
}).on(‘error’, function(e) {
console.error(name + ‘-error’, e);
}).on(‘end’, function(endData) {
fileCounter–;
if (fileCounter < 1) {
archive.finalize();
}
});
});
archive.on(‘error’, function(err) {
throw err;
});
archive.on(‘finish’, function(err) {
return res.end();
});
……
当然中间还有些细节需要处理：比如中文文件名的问题，是否需要下载文件总大小做限制，是否会出现文件不存在等等情况。