需求分析:根据七牛存储的文件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('导出失败') });
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com