导出文件，后台接口返回一堆乱码

最新推荐文章于 2024-07-06 02:52:03 发布

Dlow-

最新推荐文章于 2024-07-06 02:52:03 发布

阅读量4k

点赞数 1

本文链接：https://blog.csdn.net/qq_24992475/article/details/115130922

版权

本文记录了在前端实现下载文件功能时遇到的乱码问题及解决方案。通过设置请求的responseType为'arraybuffer'，并利用Blob对象和URL.createObjectURL方法，成功解决了从后端获取文件数据后的乱码问题。代码示例展示了如何在导出接口和处理函数中进行相应调整。

摘要由CSDN通过智能技术生成

当做一个下载文件的功能时，后端返回的可能是一堆乱码，跟后端沟通，看怎么改，我在这里记录一下我当时的修改，机百度到的处理方案
首先前端的请求中需要设置responseType:‘arraybuffer’

exportManualCashData(params) {
  return Fetch({
    url: '/tmp/exportManualCashData',
    method: 'get',
    params: params,
    responseType:'arraybuffer'
  })
},

//导出接口
exportManualCashData(){
   let params = {
     path:this.item.path,
     date:this.item.operateTime,
   }
   Service.exportManualCashData(params).then((res)=>{
     console.log(res);
     this.isExcel('xlsx','下载', res);
   })
 }
 isExcel (type, name, data) {
   const link = document.createElement('a')
   const blob = new Blob([data])
   link.style.display = 'none'
   link.href = URL.createObjectURL(blob)
   link.setAttribute('download', `${name}.` + type)
   document.body.appendChild(link)
   link.click()
   document.body.removeChild(link)
 },

上面的代码中，导出接口exportManualCashData是我原本的下载操作接口，isExcel是解决乱码的问题，其中type是表格的后缀名，name是下载文件时的显示名，res是原本接口返回的乱码数据，