前端获取后台文件导出

HebyH_

于 2021-11-04 20:38:36 发布

阅读量246

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/m0_45159572/article/details/121150706

版权

这段代码展示了如何利用axios库实现文件的下载功能。通过设置响应类型为arraybuffer，获取到文件内容，然后创建一个新的Blob对象，利用a标签的click事件触发文件下载，同时释放内存。整个过程包括设置请求参数，处理响应头获取文件名，以及创建和触发下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DownloadOriginalFile () {
//直接跳转下载
// window.open(`../../../../UploadFiles/CrudeOil/${this.selectedRow.fileStoreName}`)
let data = {
id: this.selectedRow.id
}
//文件流下载
axios.request({
url: '  ',
params: data,
method: 'get',
responseType: 'arraybuffer'
}).then(res => {
console.log(111, res)
var temp = res.headers["content-disposition"]
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
var matches = filenameRegex.exec(temp);
var filename
if (matches != null && matches[1]) {
filename = matches[1].replace(/['"]/g, '');
}
let a = document.createElement('a')
let blob = new Blob([res.data])
let objectUrl = URL.createObjectURL(blob)
a.setAttribute('href', objectUrl)
a.setAttribute('target', '_self')
a.setAttribute('download', filename)
a.click()
// console.log(objectUrl);
URL.revokeObjectURL(objectUrl) // 释放内存
// if (res.data.code == 200) {
// } else {
// this.$message.info(res.data.message);
// }
}, res => {
console.log(res)
})

},