vue a标签下载excel文件

最新推荐文章于 2025-02-14 09:46:54 发布

爱吃的前端程序员

最新推荐文章于 2025-02-14 09:46:54 发布

阅读量3.9k

点赞数 1

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/y521123y/article/details/105597194

版权

vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何在Vue框架中实现从后端获取数据并生成Excel文件供前端下载的方法。通过axios请求后端API，利用Blob对象处理响应数据，创建隐藏的a标签触发下载，实现无缝下载体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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