前端处理后端返回文件流实现导出Excel

实现功能:

前端发送请求后,接收后端返回的文件流(一般是乱码),实现导出Excel的方法。

js代码(封装的promise对象):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import Vue from 'vue'
import notification from 'ant-design-vue/es/notification'

// 实例化Vue对象
const vm = new Vue()

/**
* 前端处理后端返回文件流实现导出Excel的方法
*
* @export
* @param {String} url 接口地址
* @param {Object} params 传递参数
* @param {String} fileName 文件名称
* @return {Promise} Promise对象
*/
export function getExcelExport (url, params, fileName) {
return new Promise((resolve, reject) => {
vm.$http.post(url, params, { responseType: 'blob' }).then(res => {
const link = document.createElement('a')
const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
link.setAttribute('download', `${fileName || '导出文件'}.xls`)
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
resolve({ message: '导出成功' })
}).catch(err => {
notification.error({
message: '错误',
description: '导出接口出错'
})
reject(err)
})
})
}

如有错误,请多指教,谢谢!


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!