js 打包七牛文件並下載zip

需求分析：根據七牛存儲的文件url，把這些文件打包下載。

實現方式，獲取文件內容，使用 jszip 進行壓縮，最後使用 file-saver 進行保存下載。

須要注意兩點：

1：某些 web框架（好比 laravel） 會給 axios 配置上默認的請求頭。在請求文件時須要去掉默認的請求頭，同時設置Content-type 爲'application/x-www-form-urlencoded; charset=UTF-8'， 不然會致使跨域。

2：response type 是 binary，文件是以二進制的方式傳過來的，因此要設置 responseType 爲 blob.

部分代碼示例：

import JSZip from 'jszip'
import filesaver from "file-saver"

var zip = new JSZip();

// 我用的 axios 須要把這兩個 header 刪掉
delete window.axios.defaults.headers.common['X-Requested-With'];
delete window.axios.defaults.headers.common['X-CSRF-TOKEN'];

axios.get(file.file_url, {
    responseType: 'blob',
    headers : {
      'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
  }).then(function(res){
    var response = res.data;
    zip.file(file.id + "_" + file.name, response, {binary: true});
    // do your job
  }).catch(function(error){
    console.error(error);
  });

保存：

zip.generateAsync({
  type: "blob"
}).then((blob) => {
  filesaver.saveAs(blob, this.current_zip_name)
}, (err) => {
  alert('導出失敗')
});