zoukankan      html  css  js  c++  java
  • 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'
  • 相关阅读:
    【JVM】程序计数器(四)
    【JVM】运行时数据区概述及线程(三)
    【JVM】类加载子系统(二)
    MyException--org.apache.ibatis.exceptions.PersistenceException: ### Error building SqlSession. ###
    计算机常用指令大全
    HTML的设计与应用
    想得太多,又做的太少
    互联网数据库分库分表现状及一点思考
    python中的函数与文件操作
    python中的流程控制语句
  • 原文地址:https://www.cnblogs.com/fyjz/p/15262282.html
Copyright © 2011-2022 走看看