vue a标签下载excel文件

后端根据查询条件生成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)
    })
  })
}

你可能感兴趣的:(vue,vue,javascript)