下面这两个方法可以放在utlis下的index文件夹下面,如果想用导出方法,就在当前页面引入
import { debounce } from "@/utlis/index.js";
get导出请求
// 下载
/**
* @description: ajax下载/导出文件
* @param {string} url 资源或接口地址,可携带参数
* @param {function} progressCallback 选填,前端自定义的下载进度回调
*/
export const download = function (url, title, progressCallback) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open('get', url)
xhr.responseType = 'blob'
xhr.onload = e => {
if (xhr.status === 200) {
const response = xhr.response
resolve(response)
console.log(response, 34434);
const dispoition = xhr.getResponseHeader('Content-Disposition') || ''
const nameStr = dispoition.split(';')[1] || ''
const fileName = decodeURIComponent(nameStr.split('=')[1] || '')
// 判断接口返回数据格式正确才 导出/下载 文件
// excel表格typr "text/xml" application/vnd.ms-excel
if (response.type == "text/xml" || response.type == "application/force-download" || response.type == "application/vnd.ms-excel" || response.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(response, fileName)
} else {
const href = URL.createObjectURL(response)
let ele = document.createElement('a')
ele.target = '_blank'
ele.href = href
ele.download = fileName
ele.click()
ele = null
URL.revokeObjectURL(href)
setTimeout(() => {
Notification({
title: "提示",
message: title ? '下载成功' : '导出成功',
type: "success",
})
}, 2000);
}
} else {
Notification({
title: "提示",
message: title ? '下载失败' : '导出失败',
type: "error",
})
}
} else {
reject(new Error(`${xhr.status}:请求失败`))
}
}
xhr.error = err => {
reject(err)
}
xhr.onprogress = e => {
if (e.lengthComputable) {
const percentComplete = e.loaded / e.total
progressCallback && progressCallback(percentComplete)
}
}
xhr.send(null)
})
}```
放在某个方法里面用
```javascript
// 下载
downloadExel() {
let url = null;
if (process.env.NODE_ENV === "development") {
url = `/builder/api/v1/bfpBudget/exportBudgetList?year=${this.year}`;
} else {
let urlData = window.location.href;
let ary = urlData.split("/");
ary.map((item, index) => {
if (item == "builder") {
let c = ary.slice(0, index);
url = c.join("/");
}
});
url = `${url}/builder/api/v1/bfpBudget/exportBudgetList?year=${this.year}`;
}
// console.log(url);
download(url).then((res) => {
// if (res.size) {
// this.$notify({
// title: "提示",
// message: "导出成功",
// type: "success",
// });
// } else {
// this.$notify({
// title: "提示",
// message: "导出失败",
// type: "success",
// });
// }
});
},
post导出请求
/**
*
* @param {*} url 地址
* @param {*} data 参数
* @param {*} progressCallback 选填,前端自定义的下载导出成功失败提示
* @returns
*/
export const getCostDetailExport = function (url, data, fileName) {
return server
.request({
headers: {
"Content-Type": "application/json;charset=utf-8",
},
url,
responseType: "blob",
method: "post",
data,
})
.then(async (res) => {
console.log(res, 3333);
// 判断接口返回数据格式正确才导出文件
if (!fileName) {
// 获取后台设置文件名称
fileName = decodeURIComponent(res.headers['content-disposition'].split(';')[1].split('=')[1]);
console.log(fileName, 222);
}
if (res.type == "text/xml" || res.data.type == "text/xml" || res.data.type == "application/vnd.ms-excel") {
if ("download" in document.createElement("a")) {
const elink = document.createElement("a");
elink.download = fileName;
elink.style.display = "none";
if (res.type) {
elink.href = URL.createObjectURL(res);
} else {
elink.href = URL.createObjectURL(res.data);
}
document.body.appendChild(elink);
elink.click();
// 释放 通过调用 URL.createObjectURL() 创建的 URL 对象
URL.revokeObjectURL(elink.href);
document.body.removeChild(elink);
} else {
navigator.msSaveBlob(res.data, fileName);
}
setTimeout(() => {
Notification({
title: "提示",
message: "导出成功",
type: "success",
})
}, 2000);
} else {
Notification({
title: "提示",
message: "导出失败",
type: "error",
})
}
})
.catch((err) => {
// 处理错误
// errorCallback
});
}
页面用法
// 导出报表
async exportReport(exportParameters) {
let reg = new RegExp("-", "g");
let mon = this.monthValue.replace(reg, "");
let param = {
kjqj: mon,
zrzx: this.responsibilityValue,
version: exportParameters,
};
if(this.valueHeaderData == ''){
this.valueHeaderData ='1'
}
// console.log(this.storageData);
if (exportParameters == "2") {
let url = `/api/v1/BfpReportIndicatorDataConfig/exportIncomeStatement?kjqj=${mon}&zrzx=${this.responsibilityValue}&version=${exportParameters}&all=${'1'}`;
getCostDetailExport(url, this.storageData, "利润表变动表.xls");
} else if (exportParameters == "3") {
let url = `/api/v1/BfpReportIndicatorDataConfig/exportIncomeStatement?kjqj=${mon}&zrzx=${this.responsibilityValue}&version=${exportParameters}&all=${this.valueHeaderData}`;
getCostDetailExport(url, null, "利润表最终表.xls");
}