需求:通过后端接口下载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对象
 })

ps:在下载的过程中,会有一个文件名的问题;这里后端把它放到了header里面,但是axios的res.header并不能获取:

而浏览器中是这样的

最后找到了解决方法:

只需要在服务器端header里面设置

Access-Control-Expose-Headers: Content-Disposition

参考

前端axios下载excel,并解决axios返回header无法获取所有数据的问题的更多相关文章

  1. 前端axios下载excel(二进制)

    需求:通过后端接口下载excel文件,后端没有文件地址,返回二进制流文件 实现:axios(ajax类似) 主要代码: axios:设置返回数据格式为blob或者arraybuffer 如: var ...

  2. SpringMVC Get请求传集合,前端"异步"下载excel 附SpringMVC 后台接受集合

    最近项目上管理后台需要自己做一部分js部分,之前都是前端来弄...碰到了下载excel,刚开始使用ajax,搞了好久发现不合适..下载不了,网上说ajax返回类型不支持二进制流.. 因此采用 wind ...

  3. 前端axios下载excel无法获取header所有字段问题

    后端设置header后,前端无法获取到其他字段,只需要在服务器端header里面设置 Access-Control-Expose-Headers: Content-Disposition

  4. AJAX 跨域请求的解决办法:使用 JSONP获取JSON数据

    由于受到浏览器的限制,ajax不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器 ...

  5. vue 解决axios请求出现前端跨域问题

    vue 解决axios请求出现前端跨域问题 最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问题.这就让我很难受.查询了资料原来是跨域的问题. 在正常开发中 ...

  6. 前端下载excel打不开求助+解法

    解法: //axios   return request({ url: "/saleUnit/exportSaleUnit", headers: { "biz-sourc ...

  7. 前端调用后端接口下载excel文件的几种方式

    今天有一个导出相应数据为excel表的需求.后端的接口返回一个数据流,一开始我用axios(ajax类库)调用接口,返回成功状态200,但是!但是浏览器没有自动下载excel表,当时觉得可能是ajax ...

  8. 【手摸手,带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目,axios配置请求、解决跨域问题

    [手摸手,带你搭建前后端分离商城系统]02 VUE-CLI 脚手架生成基本项目,axios配置请求.解决跨域问题. 回顾一下上一节我们学习到的内容.已经将一个 usm_admin 后台用户 表的基本增 ...

  9. 前端下载excel文件功能的三种方法

    1 从后端接收json数据,前端处理生成excel下载 JsonExportExcel的github地址:https://github.com/cuikangjie/JsonExportExcel 这 ...

随机推荐

  1. Charles配置抓取HTTPS请求的Android配置

    关于android手机在mac版charles上抓不到包这个问题困扰了很久,查阅了很多资料,发现是android7.0系统安全策略问题. Charles抓包正常流程1.在手机上配置证书 点击后:直接在 ...

  2. CentOS5.5 - lnmp环境安装与使用

    CentOS5.5 - lnmp环境安装与使用 到公司搭建环境可以直接使用YUM. 安装一.rpm包安装(安装方便) yum:下载软件包并且安装.前提:连网. yum 使用流程: 1. yum lis ...

  3. [转载]你所不了解的DevOps

    DevOps开发运维训练营 一旦建立了创新的文化,即使那些并非科学家或者工程师的人——诗人.演员.记者——也能以团体的形式,接受科学文化的意义.他们信奉创新文化的概念.他们以促进这种文化的方式投票.他 ...

  4. 【分布式缓存系列】集群环境下Redis分布式锁的正确姿势

    一.前言 在上一篇文章中,已经介绍了基于Redis实现分布式锁的正确姿势,但是上篇文章存在一定的缺陷——它加锁只作用在一个Redis节点上,如果通过sentinel保证高可用,如果master节点由于 ...

  5. 我的书单(Book List)

    code[class*="language-"], pre[class*="language-"] { background-color: #fdfdfd; - ...

  6. Spring Boot 2 - 使用CommandLineRunner与ApplicationRunner

    本篇文章我们将探讨CommandLineRunner和ApplicationRunner的使用. 在阅读本篇文章之前,你可以新建一个工程,写一些关于本篇内容代码,这样会加深你对本文内容的理解,关于如何 ...

  7. elasticSearch新认知

    之前已经学习使用过ElasticSearch的使用,今天补充巩固一下... 上一次的环境是在 linux下使用 EalsticSearch(安装教程详见:https://www.cnblogs.com ...

  8. 【sql注入教程】mysql注入直接getshell

    Mysql注入直接getshell的条件相对来说比较苛刻点把 1:要知道网站绝对路径,可以通过报错,phpinfo界面,404界面等一些方式知道 2:gpc没有开启,开启了单引号被转义了,语句就不能正 ...

  9. 安全圈玩起了直播,"学霸”带你玩转CTF

    [i春秋]安全圈玩起了直播,"学霸”带你玩转CTF 跟着学霸(汪神)打CTF,摸清CTF套路 汪神,是浙江大学电气工程系的“风云人物”,曾因首度破解特斯拉汽车安全系统而名声大噪.本套题目是自 ...

  10. puppetdb搭建

    puppetdb搭建 在agent端跑puppet agent -t 正常的情况下,安装puppetdb 部署postgresql数据库 部署puppetdb 建立puppetserver与puppe ...