针对于这种的文件导出,最关键的是响应类型的设置,也就是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数据的话,一定要注意这一点!

posted on 2020-01-13 09:55  華落星星的眼眸  阅读(1956)  评论(0编辑  收藏  举报