通过get或post请求下载excel表格的解决办法 您所在的位置:网站首页 怎么样下载表格文件 通过get或post请求下载excel表格的解决办法

通过get或post请求下载excel表格的解决办法

2024-06-03 09:59| 来源: 网络整理| 查看: 265

get请求方式 var downURL = '下载接口' var getData = '?starTime=20180922&endTime=20180925' var request = downURL+getData window.open(request)

或者是用a标签,herf属性指向下载的地址。比较简单。直接下载。

post请求方式。

第一步:让后端将下载的接口的response header设置:

Content-disposition: attachment; filename=数据报表.xlsx(表示会直接下载文件,文件名为‘数据报表’)

Content-Type:application/octet-stream (二进制流数据,如常见的文件下载)

第二步:修改axios请求的responseType为arraybuffer,以post请求为例:

axios({ method: 'post', url: '/api/main/manage/memberLogAttendance/findPage', responseType: 'arraybuffer', data: para, headers: { token: this.token } }).then(res => { console.log('111') this.download(res.data) // 注意,这里一定是res.data,不然导出的excel会乱码 console.log(err) }) download(data) { if (!data) { return } const url = window.URL.createObjectURL(new Blob([data])) let link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('download', '考勤统计.xlsx') document.body.appendChild(link) link.click() URL.revokeObjectURL(link.href) // 释放URL 对象 document.body.removeChild(link) link = null },

遇到的问题解决办法 1、 下载的excel乱码问题,res返回的数据,需要取res.data再去new Blob,乱码原因就是这个。

2、我的axios请求,使用了全局的拦截器,本来是通过res.success来判断接口有没有请求成功,但是,这里就需要对流数据接口进行排除,流并没有返回这个res.success,不再是json数据格式,所以可以通过响应头的content-type来进行判断排除,这也就可以继续使用统一的拦截器。

service.interceptors.response.use( // response => response,// 如果需要返回http信息譬如头部信息或状态,就使用该方式 response => { const res = response.data // 如果是请求的流数据,直接返回res去处理,res.success为undifiend if (response.headers['content-type'] === 'application/octet-stream') { return res } // 如果返回后端定义的code不是 1 ,就视为一个错误返回. if (res.success !== 1) { Message({ message: res.errMsg || 'Error', type: 'error', duration: 5 * 1000 }) if (res.errCode === 'err.token.outtime') { // token超时 store.dispatch('user/resetToken').then(() => { location.reload() }) } return Promise.reject(res || 'Error') } else { return res } },

参考地址: https://my.oschina.net/u/3964830/blog/2222103

https://www.cnblogs.com/HappyYawen/p/8623852.html

https://blog.csdn.net/Shimeng_1989/article/details/81773868



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有