1. 请求接口
- header设置，利用后端服务返回输出流，添加header,设置content-type
response.addHeader("Content-Disposition", "attachment;filename="+fileName)
response.setContentType("application/ynd.ms-excel;charset=UTF-8")
- 这里采用get方式请求，js对象Blob能存储大量的二进制数据，利用这个特性将后端服务返回的流存储到blob。
import axios from 'axios'
import { exportFile } from '@libs/tools'
export const getExportFile = (url,param,fileName,fileType) => {
axios({
method: "GET",
url: url,
params: param || {},
responseType: 'blob'
}).then(res => {
exportFile(res,'demo','xlsx')
})
}
2. 将后端返回的数据流进行转换，写一个公共方法
/**
* 导出文件
* 文件名: file_name
* 文件类型: file_type
*/
export const exportFile = (data, file_name, file_type) => {
file_name = file_name || 'test_file'
file_type = file_type || 'xls'
const url = window.URL.createObjectURL(new Blob([data]))
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.download = `${file_name}.${ file_type}`
document.body.appendChild(link)
link.click()
}
