Vue前端下载Excel文件乱码汇总

问题出现原因：

使用为Vue axios前端请求下载 后端EasyExcel进行文件下载

1. PostMan进行后端接口访问正常下载，并可以打开文件，内容完整清晰。

2. 进行路径直接访问也能完整下载

3.利用Vue前端下载，不仅文件下载不下来而且还是乱码

查找结果：

1. 大部分为没有在前端请求下载时没有加 responseType = "blob" ,可是自己加了半天还是一样。看后端的下载格式 ，也没发现啥问题

2. 继续查找原因，还有一种情况是前端Vue框架引用了Mock模块导致 请求类型失效。一顿查找压根没用到mock，无果。

3.第三种原因是我的根本原因，因为使用了axios进行请求接口，在进行封装的axios的时候，会导致axios请求下载接口导致responseType失效，果断换为：成功下载

axios({ // 用axios发送get请求
        method: 'get',
        url: 'http://localhost:8202/admin/cmn/dict/export-dict', // 请求地址
        responseType: 'blob', // 表明返回服务器返回的数据类型
        headers: {
      'Content-Type': 'application/json'
      }
    }).then(res => { // 处理返回的文件流
      //new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）
      const blob = new Blob([res.data],{type: "application/vnd.ms-excel"}); 
      const fileName = '字典数据.xlsx';//下载文件名称
      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);
    })




axios({ // 用axios发送post请求
        method: 'get',
        url: 'http://localhost:8202/admin/cmn/dict/export-dict', // 请求地址
        data: form,
        responseType: 'blob', // 表明返回服务器返回的数据类型
        headers: {
      'Content-Type': 'application/json'
      }
    }).then(res => { // 处理返回的文件流
      //new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）
      const blob = new Blob([res.data],{type: "application/vnd.ms-excel"});      
      const fileName = '字典数据.xlsx';//下载文件名称
      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);
    })

感悟：一个小细节耽误自己了好久时间，所以在学编程的路上一定要弄明白原理 不然很容易绊脚。加油打工人！！！