axios 请求 下载csv文件,出现中文乱码的情况解决

时间:2021-09-13
本文章向大家介绍axios 请求 下载csv文件,出现中文乱码的情况解决,主要包括axios 请求 下载csv文件,出现中文乱码的情况解决使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

一般vue项目,我们会封装好axios请求,,和后端约定好,对返回也做好处理,当遇上下载文件时,后端直接返回二进制文件流,需要我们自己在拦截器先设置好返回数据的格式


// interceptors 拦截器,统一处理接口的响应和错误
// 特殊处理 - 下载附件直接返回了二进制流

AxiosInstance.interceptors.response.use( (response)
=> { // TODO; 完善逻辑 requestMap.delete(response.config.requestKey); if (response.config.url.includes('下载文件的url')) { //response.data 直接返回的就是二进制流,如下high,test22,"test1,test2,test3",10.2.26.13,这是一个漏洞,这是一个 let data = { code: 200, data: response.data }; response.data = data; } const { code, error, message } = response.data || {}; if (code !== 200) { switch (code) { // 未认证 case 401: logoutResponse(); // 取消所有请求 clearAllRequest('未认证'); break; case 502: Notification.error(messageMap[code]); break; default: Notification.error({ title: error || code, message }); break; } return Promise.reject(error); } return response; }, (error) => { console.error('响应错误拦截', error); Notification.closeAll(); // 判断是否为主动取消的请求 如果是 就不用提示 if (!axios.isCancel(error) && error.message) { buildErrorResponse(error); } return Promise.reject(error); } );


请求页面
async downLoadFile(data) { let params
= { attachmentId: data.id }; await reqDownloadAttachment(params) .then((row) => { let resData = row.data; const blob = new Blob([resData], { type: 'text/csv,charset=UTF-8' }); const fileName = data.name; 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((error) => { }); },

原本我请求的时候,对请求参数中  设置  responseType: 'blob',

结果发现下载下来的文件中文乱码

怎么修改也不行,最后发现了,不设置 responseType: 'blob',,并且在  downLoadFile函数中

let resData ='\ufeff' + row.data;
   const blob = new Blob([resData], {
        type: 'text/csv,charset=UTF-8'
    });
成功!!!  关键点是在返回的data 上加上'\ufeff'

原文地址:https://www.cnblogs.com/fyjz/p/15262282.html