前端axios下载excel

Posted 幕三少

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端axios下载excel相关的知识,希望对你有一定的参考价值。

需求:通过后端接口下载excel文件,后端没有文件地址,返回二进制流文件
实现:axios(ajax类似)
主要代码:

axios:设置返回数据格式为blob或者arraybuffer
如:

    var instance = axios.creat({         ... //一些配置
        responseType: ‘blob‘, //返回数据的格式,可选值为arraybuffer,blob,document,json,text,stream,默认值为json
    })
请求时的处理:
  getExcel().then(res => {
      //这里res.data是返回的blob对象     
      var blob = new Blob([res.data], {type: ‘application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8‘}); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
      var downloadElement = document.createElement(‘a‘);
      var href = window.URL.createObjectURL(blob); //创建下载的链接
      downloadElement.href = href;
      downloadElement.download = ‘xxx.xlsx‘; //下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); //点击下载
      document.body.removeChild(downloadElement); //下载完成移除元素
      window.URL.revokeObjectURL(href); //释放掉blob对象 
 })


以上是关于前端axios下载excel的主要内容,如果未能解决你的问题,请参考以下文章

前端下载Excel时 URL.createObjectURL报错问题

js批量下载excel文件

如何使用 axios vuejs 下载 excel 文件?

如何使用 axios 下载文件

前端面试题之手写promise

VSCode自定义代码片段14——Vue的axios网络请求封装