一般情况下如果是get请求,我们可以直接把下载地址用新窗口打开,浏览器就会自动下载。
如果后端接口需要post请求,前端又该如何下载呢,一般后端接口以数据流形式返回到前端。
以axios(例子axios 进一步封装了,只做参考)为例:
excel文件,需要注意的是,相应类型 responseType: "arraybuffer" 需要添加上。
axios({ type:'post', path:'/tesUrl', data:data, opts:{responseType: "arraybuffer"}, fn:(data,res)=>{ const url = window.URL.createObjectURL(new Blob([res.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"})); const link = document.createElement('a'); link.style.display = 'none'; link.href = url; let fileNameHeader=res.headers['content-disposition']; link.download = decodeURIComponent(fileNameHeader.substring(fileNameHeader.indexOf('=')+1)); document.body.appendChild(link); link.click(); document.body.removeChild(link); this.timer = setTimeout(()=>{ this.$message.success('导出成功'); }, 1000) }, errFn:error=>{ console.log(error); this.$message.error(error); } });word文件:
axios({ type:'post', path:'testUrl', data:{id:id}, opts:{responseType: "arraybuffer"}, fn:(data,res)=>{ const url = window.URL.createObjectURL(new Blob([res.data], {type: "application/msword"})); const link = document.createElement('a'); link.style.display = 'none'; link.href = url; let fileNameHeader=res.headers['content-disposition']; link.download = decodeURIComponent(fileNameHeader.substring(fileNameHeader.indexOf('=')+1)); document.body.appendChild(link); link.click(); document.body.removeChild(link); this.timer = setTimeout(()=>{ this.$message.success('导出成功'); }, 1000) }, errFn:error=>{ console.log(error); this.$message.error(error); } });
