vue根据后端返回的url链接下载文件时添加loading

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
    })
},

这样,就可以实现这个需求了。

猜你喜欢

转载自blog.csdn.net/weixin_62733705/article/details/138225211