Vue2 导出Excel + 解决乱码问题 —— axios （下载后台传过来的流文件（excel）后乱码问题）

电玩女神 2023-07-20 13:59 25阅读 0赞

接口要求： post方法、入参为json格式、出参文件流

这个是个反例：axios.post(url, params).then这个是下载之后乱码 不知为啥

axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

下面这样的方式可以实现不乱了 axios API 可以通过向 `axios` 传递相关配置来创建请求  
axios：设置返回数据格式为 blob 或者 arraybuffer （ 注意 ）

axios({ // 用axios发送post请求
         method: 'post',
          url: ' /serviceTime/exportData', // 请求地址
          data: form, // 参数
          responseType: 'blob', // 表明返回服务器返回的数据类型
          headers: {
         'Content-Type': 'application/json'
         }
       }).then(res => { // 处理返回的文件流
         const blob = new Blob([res.data]);//new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）
         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);
     })