在做一个导出excel的功能时,由于后端返回文件流需要的时间较长就使用了element的loading组件。但是遇到的问题是在后台返回结果前loading组件的close方法就已经执行了。因为是新手代码写的可能有很大问题,求指正
相关代码:
import { Loading } from 'element-ui'
handleExport() {
let loadingInstance = Loading.service({ fullscreen: true, text: '正在处理,请稍后...', lock:true })
this.checkAlloptions = this.checkedBasicInfo.concat(this.checkedDetailedOptions)
const params = {
memberGridSearch: this.queryCondition,
exportFiledList: this.checkAlloptions
}
// 查询所有Node
// params.memberGridSearch.searchAllNodes = 1
new Promise((resolve, reject) => {
this.$commonFn.downloadCsvPost(this.downUrl, params)
resolve()
}).then(() => {
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
loadingInstance.close()
})
this.dialogVisibleExport = false
})
}
这个是我下载方法的代码,原生写的:
downloadCsvPost(url, params) {
let baseURL = process.env.BASE_API
url = baseURL + url
let xhr = new XMLHttpRequest()
xhr.open('post', url, true)
xhr.setRequestHeader('ACCESS-TOKEN', getToken())
xhr.responseType = 'blob'
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json')
// let formData = new FormData()
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
if (xhr.response.type === 'application/csv') {
// loadingInstance.close()
const blob = new Blob([xhr.response])
let url = window.URL.createObjectURL(blob)
// 创建一个a标签元素,设置下载属性,点击下载,最后移除该元素
let link = document.createElement('a')
link.href = url
link.style.display = 'none'
// 取出下载文件名
let fileName
if (xhr.getResponseHeader('content-disposition')) {
fileName = decodeURI(xhr.getResponseHeader('content-disposition').split(';')[1].split('=')[1])
} else {
fileName = new Date().getTime().toString() + '.xls'
}
link.setAttribute('download', fileName)
link.click()
window.URL.revokeObjectURL(url)
} else {
Message.error({
message: '无符合条件数据',
type: 'error',
duration: 2 * 1000
})
}
}
}
xhr.send(JSON.stringify(params))
},
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…