1. 前言
1.导出也是常用的
2. 获取文件名字
getExportFileName(fileName) { // return fileName + new Date().getTime(); return fileName + this.$fn.moment().format("YYYYMMDDHHmmss"); },
3. 请求封装
// method:get post url:请求url params:参数 fileType:pdf excel exportFun(method, url, params, fileName, fileType) { let vm = this; vm.$refs.ExportLoadingRef.show(); vm.cPercent = 0; request({ method: method ? method : "get", url, params, responseType: "blob", onDownloadProgress: (progressEvent) => { //只要设置后台的代码 response.setContentLengthLong(文件长度); 就可以了 this.cPercent = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); // console.log(this.cPercent); if (this.cPercent == 100) { setTimeout(() => { this.$refs.ExportLoadingRef.close(); }, 500); } }, }) .then((res) => { if (res.status == 200) { if (res.data.size == 0) { setTimeout(() => { vm.$refs.ExportLoadingRef.close(); }, 1000); vm.$message.error("数据获取失败"); return; } let fileReader = new FileReader(); fileReader.readAsText(res.data); fileReader.onload = function (result) { try { let jsondata = JSON.parse(result.target.result); if (jsondata.code != 0) { vm.$message.error(jsondata.msg); return; } } catch { vm.$printFn.downloadFile( res.data, vm.getExportFileName(fileName), fileType ? fileType : "pdf" ); } }; } else { this.$refs.ExportLoadingRef.close(); // this.$message.error("数据解析失败");; } }) .catch((error) => { this.$refs.ExportLoadingRef.close(); console.log(error); }); },
ExportLoadingRef
封装的进度条插件responseType
配置onDownloadProgress
配置