后端返回字符流，前端处理进行excel文件导出操作

针对于这种的文件导出，最关键的是响应类型的设置，也就是responseType的设置（responseType:"arraybuffer"或者responseType:"blob"），这两种类型都是可以的。responseType表明返回服务器返回的数据类型。

具体代码如下：

方法一：（自己在具体项目上的应用）

// 接口调用方式（这是我的项目中的调用方式，自己应用具体看自己的设置）

export const exportSysOrgUser = (data) => {

  return api.post(`${server.patchBase}/sysOrgUser/exportSysOrgUser`, data,, {responseType:"arraybuffer"})

}

let result = this.exportSysOrgUser(params); // 接口调用返回的结果

// 文件导出处理

      let content = result;

      let fileName = "用户数据.xls";

      let bolb = new Blob([content], { type: "application/vnd.ms-excel" });

      if ("download" in document.createElement("a")) {

        let link = document.createElement("a");

        link.download = fileName;

        link.style.display = "none";

        link.href = URL.createObjectURL(bolb);

        document.body.appendChild(link);

        link.click();

        URL.revokeObjectURL(link.href);

        document.body.removeChild(link);

      } else {

        navigator.msSaveBlob(bolb, fileName);

      }

方法二：（网上看见的用axios方式请求）

axios({     
　　　　url:'http://192.168.0.7:8010/sysOrgUser/exportSysOrgUser', // 请求路径

       method:'post', //请求方式

       headers:{

         contentType: 'application/json;charset=UTF-8',

          Authorization: this.$storage.getSession("token") // token

       },

         params: params, // 参数

         responseType: 'blob', // 表明返回服务器返回的数据类型

       }).then((res) => {

         let data = res.data

         const blob = data

         const fileName = '订单导出.xls'

         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)

       })

不管哪一种方式，最重要的是responseType:"arraybuffer"或者responseType:"blob"的设置，这个属性是必须传的！！！！

另外，在做的时候发现了一个很严重的问题，在自己的项目中上面的俩种方式导出的文件是乱码的，这个问题困扰我2天时间，经过排查和查资料，最终发现是前端使用的mock和responseType:"blob"之间冲突，导致responseType:"blob"没有生效。具体原因暂时还没搞明白，我把mock关闭，就一切正常了！！！

如果有人在自己的项目中用到mock数据的话，一定要注意这一点！

巴特西

后端返回字符流，前端处理进行excel文件导出操作

最新文章

热门文章