后端给你返回文件流，前端实现下载文件

调用下载接口

我们可以看到后端给我们返回这个文件流
记得加上

 responseType: 'blob'
1

// 导出下载接口
export function downloadOpen(params) {
  return request({
    url: '/slingshot/spider/data/unionsExport',
    method: 'get',
    params: params,
    responseType: 'blob'
  });
}
1
2
3
4
5
6
7
8
9

 /** 导出按钮操作 */
      async handleExport() {
        let res = await downloadOpen({
          keyWord: this.queryParams.keyWord
        })
        let blob = new Blob([res],{type:res.type})
        let downloadElement = document.createElement('a')
        let href = window.URL.createObjectURL(blob)
        downloadElement.href =  href
        document.body.appendChild(downloadElement)
        downloadElement.click()
        window.URL.revokeObjectURL(href)
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

这里打印出来的是res；后端返回的文件流 转换blob后的

这个size有数字 表示的是你文件的大小，如果是0就是没有了；
这样就可以下载了；

这里是详细的解释；

修改文件名称

这里可以看到 我们可以拿到这个filename

const fileName = res.headers['content-disposition'].split(';');
        const filename2 = fileName[1].split('=')
        const filename3 = decodeURIComponent(filename2[1])
1
2
3

通过这里 拿到 文件名称；
在通过这个将文件名附上去；

 downloadElement.download = filename3
1

这里是整个点击导出的方法了；

 /** 导出按钮操作 */
      async handleExport() {
        let res = await downloadOpen({
          keyWord: this.queryParams.keyWord
        })
        const fileName = res.headers['content-disposition'].split(';');
        const filename2 = fileName[1].split('=')
        const filename3 = decodeURIComponent(filename2[1])
        let blob = new Blob([res], {
          type: res.type
        })
        let downloadElement = document.createElement('a')
        let href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        downloadElement.download = filename3
        document.body.appendChild(downloadElement)
        downloadElement.click()
        window.URL.revokeObjectURL(href)
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20