vue axios 下载文件

刺骨的言语ヽ痛彻心扉 2021-09-24 11:34 435阅读 0赞

功能：点击导出按钮，提交请求，下载excel文件；

第一步：跟后端童鞋确认交付的接口的response header设置了

![response header][]

以及返回了文件流。

第二步：修改axios请求的responseType为blob，以post请求为例：

this.$post({
            method: 'post',
            url: 'api/user/',
            data: {
              firstName: 'Fred',
              lastName: 'Flintstone'
            },
            responseType: 'blob'
          })
            .then(response => {
              this.download(response)
            })
            .catch(error => {})

第三步：请求成功，拿到response后，调用download函数（创建a标签，设置download属性，插入到文档中并click）

// 下载文件
        download(data) {
          if (!data) {
            return
          }
          let url = window.URL.createObjectURL(new Blob([data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', 'excel.xlsx')
    
          document.body.appendChild(link)
          link.click()
        }

[response header]: /images/20210923/2933f21b4d4b44de8970b741910811c4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，435人围观）

还没有评论，来说两句吧...

相关阅读

相关 axios 上传/下载文件

cdn: https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js https://cdn.boot

骑猪看日落/ 2023年10月02日 16:57/ 0 赞/ 3 阅读

相关 axios 请求下载excel文件

　　前端　　window.Axios.post(window.ApiName.excelExport, params ,\{ responseType: 'blob' \}

﹏ヽ暗。殇╰゛Y/ 2023年09月24日 07:45/ 0 赞/ 135 阅读

相关 vue.js - axios如何下载文件？

[https://www.zhihu.com/question/263323250/answer/267842980][https_www.zhihu.com_question

客官°小女子只卖身不卖艺/ 2023年06月02日 05:30/ 0 赞/ 10 阅读

相关 vue axios ts 封装流文件下载方法

vue axios ts 封装流文件下载方法 // 定义文件下载的接口 interface DOWNFILETYPE { url: st

怼烎@/ 2023年01月06日 01:16/ 0 赞/ 217 阅读

相关 vue axios ts 封装流文件下载方法

vue axios ts 封装流文件下载方法 // 定义文件下载的接口 interface DOWNFILETYPE { url: st

￡神魔★判官ぃ/ 2022年11月19日 12:44/ 0 赞/ 352 阅读

相关 axios上传下载文件

文件上传 fileUpload(val) { let fd = new FormData(); fd.append("fi

矫情吗；*/ 2022年10月08日 11:17/ 0 赞/ 183 阅读

相关 Axios POST 下载文件；HTTP GET下载文件

1.遇到的问题 1）通过Post下载文件，发现服务网关（Kestrel）不允许添加响应头（未解决）请求接口时候的配置： exportSchemeDetail

拼搏现实的明天。/ 2022年09月09日 04:36/ 0 赞/ 210 阅读

相关 Vue+ajax实现文件下载【这里的ajax->axios】

文章转自：[https://www.cnblogs.com/yulj/p/8494465.html][https_www.cnblogs.com_yulj_p_8494465.

我不是女神ヾ/ 2022年02月04日 01:47/ 0 赞/ 401 阅读

相关 vue axios 下载文件

功能：点击导出按钮，提交请求，下载excel文件；第一步：跟后端童鞋确认交付的接口的response header设置了 ![response header][] 以及

刺骨的言语ヽ痛彻心扉/ 2021年09月24日 11:34/ 0 赞/ 436 阅读

相关 vue中axios实现下载

前端项目实现请求后台步骤一：安装axios组件，一般使用命令：npm install axios --save 步骤二：为了项目规范整洁，把一些常用的请求方式放在了一个

骑猪看日落/ 2021年07月26日 20:16/ 0 赞/ 576 阅读