【前端】vue+axios 解决调用后端接口下载接口返回乱码的问题

最新推荐文章于 2024-07-10 16:07:08 发布

原创最新推荐文章于 2024-07-10 16:07:08 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

文章讲述了在调用API获取文件时遇到的响应乱码问题，以及如何通过设置axios的responseType为blob来处理文件下载。通过解析content-disposition头获取文件名，并创建隐藏的a标签实现浏览器下载功能。

问题：调用接口后，response是一串乱码，没有以附件形式保存文件。

解决：

//文件下载
export const downloadFile = function (params) {
    // return axios.get("/file/fileDownload", { params });
    return axios({
        method:'get',
        url:"/file/fileDownload",
        params:params,
        responseType:'blob'
    }).then(function(res){
        if(res.headers['content-disposition'] !== undefined){
            let blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
            let fileName = decodeURI(res.headers['content-disposition']) 
          if (fileName) { 
            fileName = fileName.substring(fileName.indexOf('=') + 1)
          }
          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) 
          document.body.removeChild(elink) 
        }
    })
}