利用Blob实现导出excel

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