本篇文章给大家带来的内容是关于javascript如何打包七牛文件并下载压缩(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
需求分析:根据七牛存储的文件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-savervar 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('导出失败')});
相关推荐:
七牛mkzip压缩中文文件名乱码
实例详解vue 中批量下载文件并打包方法
以上就是javascript如何打包七牛文件并下载压缩(代码)的详细内容。