vue axios 下载文件

功能:点击导出按钮,提交请求,下载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()
    }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章