后端根据查询条件生成excel文件返回前端,vue框架进行下载

html部分

<div>
  <a-button type="primary" @click="handleDownload(index)">下载</a-button>
</div>

js部分

handleDownload(index){
    let id=this.staffApplyList[index].id;
    staffApplyDownload(id).then(result=>{
      let url = window.URL.createObjectURL(result);
      let link=document.createElement('a');
      link.style.display='none'
      link.href=url;
 	  link.setAttribute('id', 'downloadLink')
	  link.setAttribute('download','员工资料信息表.xls');
	  document.body.appendChild(link)
	  link.click();

	  // 删除添加的a链接
	  let objLink = document.getElementById('downloadLink')
	  document.body.removeChild(objLink)
   })
}

axios部分

export function staffApplyDownload(applyId){
  return new Promise((resolve,reject)=>{
    axios.get(`/apply/download/excel`,{
      params:{applyId},
      headers:{
        Authorization: `Bearer ${token}`
      },
      responseType: 'blob'
    }).then(result=>{
      resolve(result.data)
    }).catch(err=>{
      reject(err)
    })
  })
}
Logo

前往低代码交流专区

更多推荐