标签：axios elink 乱码 code blob error csv data response

一般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'      

标签：axios,elink,乱码,code,blob,error,csv,data,response
来源： https://www.cnblogs.com/fyjz/p/15262282.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。