Vue实现文件下载进度显示

// downLoadProgress 为进度百分比
async downloadFile() {
            const that = this
            await $axios.get(url, {
                responseType: 'blob',
                onDownloadProgress: function(progressEvent) {
                    if (progressEvent.lengthComputable) {
                        that.downLoadProgress = (progressEvent.loaded / progressEvent.total * 100).toFixed(2) + '%'
                    }
                }
            }).then(res => {
                // 地址转换
                const url = window.URL.createObjectURL(res.data)
                // 文件名
                const fileName = '长春市城区防汛指挥调度平台用户使用手册.docx'
                const a = document.createElement('a')
                a.setAttribute('href', url)
                a.setAttribute('download', fileName)
                document.body.append(a)
                a.click()
                document.body.removeChild(a)
                that.downLoadProgress = ''
            }).catch(() => {
                that.downLoadProgress = ''
            }).finally(() => {
            })
        }