Vue项目利用axios请求接口下载excel


Posted in Vue.js onNovember 17, 2020

本文实例为大家分享了Vue项目利用axios请求接口下载excel的具体代码,供大家参考,具体内容如下

据我了解的前端的下载方式有三种,第一种是通过a标签来进行下载,第二种时候通过window.location来下载,第三种是通过请求后台的接口来下载,今天就来记录一下这三种下载方式。

方法一:通过a标签

// href为文件的存储路径或者地址,download为问文件名
<a href="/images/logo.jpg" rel="external nofollow" download="logo" />

优点:简单方便。
缺点:这种下载方式只支持Firefox和Chrome不支持IE和Safari,兼容性不够好。

方法二:通过window.location

window.location = 'http://127.0.0.1:8080/api/download?name=xxx&type=xxx'

优点:简单方便。
缺点:只能进行get请求,当有token校验的时候不方便。

方法三:通过请求后台接口

// download.js
import axios from 'axios'

export function download(type, name) {
 axios({
 method: 'post',
 url: 'http://127.0.0.1:8080/api/download',
 // headers里面设置token
 headers: {
 loginCode: 'xxx',
 authorization: 'xxx'
 },
 data: {
 name: name,
 type: type
 },
 // 二进制流文件,一定要设置成blob,默认是json
 responseType: 'blob'
 }).then(res => {
 const link = document.createElement('a')
 const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
 link.style.display = 'none'
 link.href = URL.createObjectURL(blob)
 link.setAttribute('download', `${name}.xlsx`)
 document.body.appendChild(link)
 link.click()
 document.body.removeChild(link)
 })
}
// download.java
@RequestMapping(value = "/api/download",produces = "application/octet-stream", method = RequestMethod.POST)
public void downloadTemplate(@RequestBody Map<String,Object> paramsMap, HttpServletResponse response) {
 try {
 if (paramsMap.get("type").equals("xxx") && paramsMap.get("name").equals("xxx")) {
 String[] str = new String[]{"区县","所属省份","所属地市"};
 Workbook workbook = ExportExcel.exportExcel("行政区划表模版", str, null, "yyyy-MM-dd");
 download(response, workbook, "CityDict");
 }
 } catch (Exception e) {
 e.printStackTrace();
 }
}

private void download(HttpServletResponse response, Workbook workbook, String fileName) {
 try {
 response.setContentType("application/octet-stream;charset=UTF-8;");
 response.addHeader("Content-Disposition", "attachment;fileName=" + fileName + ".xlsx");
 ByteArrayOutputStream by = new ByteArrayOutputStream();
 OutputStream osOut = response.getOutputStream();
 // 将指定的字节写入此输出流
 workbook.write(osOut);
 // 刷新此输出流并强制将所有缓冲的输出字节被写出
 osOut.flush();
 // 关闭流
 osOut.close();
 } catch (IOException e) {
 LogUtils.getExceptionLogger().info("下载模板错误:{}", e.getMessage());
 }
}

优点:可以在headers里面设置token,文件是java代码中生成的,生成的文件比较灵活。
缺点:实现起来比较复杂。

关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
浅析VUE防抖与节流
Nov 24 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
详解Vue router路由
Nov 20 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue实现下载文件流完整前后端代码
Nov 17 #Vue.js
vue+iview实现文件上传
Nov 17 #Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 #Vue.js
vue+iview实现分页及查询功能
Nov 17 #Vue.js
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 #Vue.js
vue+iview分页组件的封装
Nov 17 #Vue.js
在vue中通过render函数给子组件设置ref操作
Nov 17 #Vue.js
You might like
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
python多线程抽象编程模型详解
2019/03/20 Python
Python文件路径名的操作方法
2019/10/30 Python
python滑块验证码的破解实现
2019/11/10 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
微笑面对生活演讲稿
2014/05/13 职场文书
会计求职信范文
2014/05/24 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS