前端如何实现按钮点击文件下载呢？

<el-button type="primary" icon="Download" @click="downloadFn">下载</el-button>

这里后端会提供一个下载文件的接口，在写项目的时候呢当然大家都会对axios进行二次封装啦毋庸置疑，但是对于单独一个文件下载功能的话呢，本人单独在使用到的vue组件里引入了axios进行编写如下：

const downloadFn = () => {
    axios({
      method: 'get',
      url: BASEURL + '/file/download',
      responseType: 'blob',
      headers: {
        Authorization: 'Bearer ' + getToken()
      }
    }).then(res => {
      const blob = new Blob([res.data], {
        type: 'application/vnd.ms-excel',
      })
      const objUrl = window.URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.setAttribute('href', objUrl)
      a.setAttribute('download', '信众信息.xlsx')
      a.click()
      window.URL.revokeObjectURL(objUrl)
    })
}

由于后端返回的数据是在响应流当中，所以要注意加responseType:'blob'返回的类型哈并且要记得带请求头在成功响应之后呢需要创建一个Blob

type: 'application/vnd.ms-excel' 这里指的是下载文件的类型为excel文件然后就是创建一个a标签去模拟点击将转换好的地址添加到href属性当中哈，最后调用了click方法文件就能成功的下载下来。

重要的一点别忘了给按钮添加防抖噢！！！

聊聊前端文件下载功能如何实现

前端如何实现按钮点击文件下载呢？