安装下载jszip、file-saver依赖
npm install jszip npm install file-saver npm install axios
在自己需要的页面引入
import axios from "axios"; import JSZip from "jszip"; import FileSaver from "file-saver";
使用axios下载buffer流
const getFile = (url, callback) => { return new Promise((resolve, reject) => { axios({ method: "get", //使用get请求 url, //放入的文件地址 responseType: "arraybuffer" //请求的数据buffer对象 onDownloadProgress: function(progressEvent) { //这一步是下载文件进度条,可以和progress进度条一块使用,不过多个文件下载会有很丑的动画,建议同步下载显示进度条 // 对原生进度事件的处理 if (callback) { callback(progressEvent); } } }) .then(data => { resolve(data.data); }) .catch(error => { reject(error.toString()); }); }); };
调用上边的函数
fileDownLoadHandler() { // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径 var that = this; var files = that.getData; const zip = new JSZip(); const cache = {}; const promises = []; files.forEach(items => { items.orderFiles.forEach(item => { var orderName = items.orderName; const promise = getFile(item.url, that.progressBar).then(data => { // 下载文件, 并存成ArrayBuffer对象 const arr_name = item.url.split("/"); const file_name = arr_name[arr_name.length - 1]; // 获取文件名 // zip.file(file_name, data, { binary: true }); // 逐个添加文件 zip.file(orderName + "/" + file_name, data); cache[file_name] = data; }); promises.push(promise); }); }); Promise.all(promises).then(() => { console.log("全部下载完成"); zip.generateAsync({ type: "blob" }).then(content => { // 生成二进制流 console.log("生成压缩包"); FileSaver.saveAs(content, "RobotInformation.zip"); // 利用file-saver保存文件 自定义文件名 }); }); },
如果想用进度条,可以在下边设置
progressBar(progressEvent) { // 获取百分比(此处保留了一位小数) let percentage = Number( ((progressEvent.loaded / progressEvent.total) * 100).toFixed(1) ); console.log(percentage); this.$nextTick(() => { this.progressNum = percentage; }); // 让百分比显示在界面上 }
<el-progress :percentage="progressNum"></el-progress>