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

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请求的responseTypearraybuffer,以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

你可能感兴趣的:(前端技术积累,vue,JavaScript)