1. 前言
1.導(dǎo)出也是常用的
2. 獲取文件名字
getExportFileName(fileName) {
// return fileName + new Date().getTime();
return fileName + this.$fn.moment().format("YYYYMMDDHHmmss");
},
3. 請(qǐng)求封裝
// method:get post url:請(qǐng)求url params:參數(shù) 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) => {
//只要設(shè)置后臺(tái)的代碼 response.setContentLengthLong(文件長(zhǎng)度); 就可以了
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("數(shù)據(jù)獲取失敗");
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("數(shù)據(jù)解析失敗");;
}
})
.catch((error) => {
this.$refs.ExportLoadingRef.close();
console.log(error);
});
},
ExportLoadingRef
封裝的進(jìn)度條插件responseType
配置onDownloadProgress
配置