最近在作一個文件下載的功能,這裏把作的過程當中用的技術和坑簡要總結下。
上篇文章 《經過 JavaScript 下載文件到本地(單文件)》說了下如何下載單文件,這篇主要說下如何作多文件的批量下載
若是文件數量可控,對於下載出來的文件格式無要求,能夠用最簡單的辦法,直接遍歷文件,分別給每一個下載連接建立一個單文件的download或者iframe下載連接。前端
雖說能夠遍歷全部文件,而後去批量下載單個文件,可是這種體驗畢竟不太好,最多見的作法是把批量的文件下載並打包到zip中。segmentfault
因此首先的一個實現思路是:在代理服務裏,先去遍歷全部的文件去請求文件數據,而後壓縮到zip包中,而後再把zip包返回給客戶端。app
這麼作對於下載量數據比較小時ok,可是若是批量文件特別多特別大時,用戶要等後臺把全部的數據都請求到而且都打包都壓縮包裏,前端纔能有反饋,這個時間可能會耗時很長,用戶體驗可能不好。post
在同事的前期調研時,有說這裏能夠作一個流式的邊壓縮邊下載
的能力,大體的思路是,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(); }); ......
固然中間還有些細節須要處理:好比中文文件名的問題,是否須要下載文件總大小作限制,是否會出現文件不存在等等狀況。code