js 打包七牛文件並下載zip

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

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

須要注意兩點:git

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

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

部分代碼示例:npm

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);
  });

保存:axios

zip.generateAsync({
  type: "blob"
}).then((blob) => {
  filesaver.saveAs(blob, this.current_zip_name)
}, (err) => {
  alert('導出失敗')
});
相關文章
相關標籤/搜索