需求分析:根據七牛存儲的文件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('導出失敗') });