下载后端传来的excel文件

ananzhangwei

已于 2022-09-18 19:08:15 修改

阅读量1.5k

点赞数

文章标签：前端

于 2022-04-07 00:16:58 首次发布

本文链接：https://blog.youkuaiyun.com/ananzhangwei/article/details/124003690

版权

这篇博客讲述了如何在前端通过处理HTTP请求，设定responseType和headers，成功下载后端返回的Excel文件。当请求成功后，通过触发点击事件，实现文件的自动下载。

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

html内容

<el-button  size="small" type="primary" @click="exprotExcel">下载excel模板</el-button>

请求处理

下面为请求的函数，设置特殊的responseType（文件格式具体看后端有可能为StringBuffer）和headers

  export(paramsList){
        return myAxios({
            url:'/api/auth/excel/exportExcel',
            method:'get',
            responseType: 'blob',
            headers: { 'Content-Type': 'application/x-download' }
           
        })
    },

请求成功后的处理

  exprotExcel(){
             staff.export().then(res=>{
console.log(res);
               const link = document.createElement('a')
    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)
    link.setAttribute('download', `${name}.xlsx`)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)

             })
    },

接着触发点击事件就能看到左下角excel文件被下载了