需求:前后端完全分離的項(xiàng)目,需要一個(gè)導(dǎo)出功能,前端使用ant design vue,后端 NetCore5.0,后臺(tái)返回?cái)?shù)據(jù)為 IActionResult
exportExcel(){
exportExcel().then((res)=>{
this.downloadfile(res)
// eslint-disable-next-line handle-callback-err
}).catch((err) => {
this.$message.error('下載錯(cuò)誤:獲取文件流錯(cuò)誤')
})
},
downloadfile(res) {
var blob = new Blob([res.data], {
type: 'application/octet-stream;charset=UTF-8'
})
var contentDisposition = res.headers['content-disposition']
var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
var result = patt.exec(contentDisposition)
var filename = result[1]
var downloadElement = document.createElement('a')
var href = window.URL.createObjectURL(blob) // 創(chuàng)建下載的鏈接
var reg = /^["](.*)["]$/g
downloadElement.style.display = 'none'
downloadElement.href = href
downloadElement.download = decodeURI(filename.replace(reg, '$1')) // 下載后文件名
document.body.appendChild(downloadElement)
downloadElement.click() // 點(diǎn)擊下載
document.body.removeChild(downloadElement) // 下載完成移除元素
window.URL.revokeObjectURL(href)
},