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