后端返回的流文件乱码的问题

在调用后端导出 excel 接口的时候，后端返回的是文件流，会乱码

解决方法

async exportExc() {
  if (!this.searchForm.time) {
    this.$message.warning('请选择导出月份')
  } else {
    try {
      let start_time = parseTime(this.searchForm.time, '{y}-{m}')
      start_time += '-01'
      const res = await exportFinancial({start_time: start_time }) // 得到流文件
      
      // 1.用 Blob 包装一下，注意设置 type 类型和编码
      const excel = new Blob([res], {type: 'application/vnd.ms-excel;charset=utf-8'})
      // 2.给创建的 Blob 实例创建一个 url
      const excelUrl = URL.createObjectURL(excel)
      // 3.创建一个 a 标签，为了方便给导出的 excle 命名
      const link = document.createElement('a')
      // 4.将创建的 url 赋值给 a 标签的 href
      link.href = excelUrl
      // 5.给文件命名
      link.download = '财务对账 ' + start_time.slice(0, -3)
      // 6.触发 click 事件，相当于下载文件
      link.click()
    } catch (err) {
      console.log(err)
    }
  }
}

这个时候我们虽然可以导出文件了，但是打开文件还是乱码的，为什么呢？因为我们还必须得配置 responseType

然后我们修改一下 api

// 财务对账导出
export function exportFinancial(params) {
  return request({
    url: '/account/financial/export',
    method: 'get',
    params,
    responseType: 'arraybuffer'  // 注意配置这个选项
  })
}

done。

---

本文结束，感谢阅读。

本文作者：melody0z
本文链接：https://melodyvoid.github.io/JavaScript/the-stream-file-garbled-returned-by-backend.html
欢迎转载，转载请注明文本链接