Vue3-将流数据转换为文件并实现自动下载

具体需求：后端接口返回流数据，前端根据接口拿到的流数据转换为excel表格
后端接口返回数据示例：

image.png

注意：流数据可以被转换为exel表格是项目的具体需求，是和后端约定好的
因为需要手动改变axios的contentType和responseType，所以要单独处理这次请求，将其封装成一个hooks

import axios from 'axios'
import { ElMessage } from 'element-plus'

const exportAnalysisHooks = (url) => {
  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
  axios.defaults.responseType = 'blob'
  axios
    .post(
      url,
      {},
      {
        headers: {
          Authorization: window.localStorage.getItem('analysis_platform_accessToken') || '',
        },
      }
    )
    .then((res) => {
      const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
      const fileName = decodeURI(res.headers['content-disposition'])
      if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }
    })
    .catch((err) => {
      console.log(err.response)
      ElMessage.error(err.response.data.message || '请求失败')
    })
}
export default exportAnalysisHooks

调用的时候传入url参数就可以了

import exportAnalysisHooks from '../../hooks/exportAnalysisHooks'
//调用
exportAnalysisHooks(url)