vue根据后端返回的url链接下载文件时添加loading
后端给的链接,放到a标签里的href中可以直接下载,但是遇到大文件时,需要等待,需要加上loading。
可以先改成button按钮,然后在click事件中创建a标签,这时候就可以在生成a标签的前后添加loading了
上代码:
<a-button @click="downloadClick(row)">下载</a-button>
方法:
// 下载按钮
downloadClick(row) {
const link = this.baseUrl + row.file_name + '/download'
const name = row.file_name
// console.log('loading开始');
this.loading = true
let a_link = document.createElement('a')
// 这里是将url转成blob地址,
fetch(link).then(res => res.blob()).then(blob => {
// 将链接地址字符内容转变成blob地址
a_link.href = URL.createObjectURL(blob)
// console.log(a_link.href)
a_link.download = name //下载的文件的名字
document.body.appendChild(a_link)
a_link.click()
// console.log('loading结束');
this.loading = false
})
},
这样,就可以实现这个需求了。