vue中使用axios下载java后台返回的excel文档

1,307 阅读1分钟

1.配置请求

  adminPayerMonthlyExport (data,url) { // 账单导出
    return axios({
      url,
      method: 'post',
      data,
      responseType: 'blob',
      ContentType: 'application/json'
    })
  }

2.配置方法

function exportBillingExcel (data, res) {
 if (!data) {//如果没有data数据就不进行操作
   return
 }
 // 获取headers中的filename文件名
 let tempName = res.headers['content-disposition'].split(';')[1].split('filename=')[1]
 //解决中文乱码
 let fileName=tempName?decodeURIComponent(tempName):''
 let blob = new Blob([data], { type: 'application/vnd.ms-excel' })//转换成二进制对象
 if ('download' in document.createElement('a')) { // 不是IE浏览器
   let url = window.URL.createObjectURL(blob)//二进制对象转换成url地址
   let link = document.createElement('a')
   link.style.display = 'none'
   link.href = url
   link.setAttribute('download', fileName)
   document.body.appendChild(link)
   link.click()
   document.body.removeChild(link) // 下载完成移除元素
   window.URL.revokeObjectURL(url) // 释放掉blob对象
 } else {
   window.navigator.msSaveBlob(blob, fileName)
 }
}

3.在vue中使用

   exportExcel () {
     let start = this.startDate//请求参数
     commonApi.adminPayerMonthlyExport({ start })//axios请求
     .then(res => {
       exportBillingExcel(res.data, res)//使用配置的方法进行处理即可
     })
   }