近来在做一个文件下载的功用，这里把做的历程顶用的手艺和坑扼要总结下。

上篇文章
《经由过程 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();
});

......

固然中心还有些细节须要处置惩罚：比方中文文件名的题目，是不是须要下载文件总大小做限定，是不是会涌现文件不存在等等状况。