vue+axios 前端下载文件-解决后端返回的文件流乱码问题

最新推荐文章于 2024-07-01 14:42:59 发布

weixin_33962621

最新推荐文章于 2024-07-01 14:42:59 发布

阅读量1.2w

点赞数 11

文章标签：前端后端 javascript ViewUI

原文链接：https://juejin.im/post/5cce3e6a5188254194355042

版权

博客主要讲述前端请求后端数据出现乱码的解决方法。在前端请求时携带请求头responseType:blob，可使返回的数据变为Blob对象。同时提醒，axios使用封装后的请求设置该请求头不生效，推荐用axios({})方式请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打印出后端返回的数据：乱码了

解决方法：

在前端请求的时候携带请求头responseType:blob，


    axios({
        method: 'GET',
        url: '/api',
        params: params,
        responseType: 'blob'
    }).then(res=>{
        console.log(res)
        let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
        let url = window.URL.createObjectURL(blob);
        window.location.href = url;
    }).catch(err=>{
        console.log(err)
    })
 
复制代码

携带请求头后，再次打印后端返回的数据，data为Blob对象了，

?【注意】：

axios使用封装过后的请求设置请求头responseType:'blob'不生效，推荐大家使用axios({})的方式，不要使用如：axios.get()的方式