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 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 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 显示客户端IP与服务器IP的代码
2010/10/12 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
javascript 打印内容方法小结
2009/11/04 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
详解JS面向对象编程
2016/01/24 Javascript
jQuery事件用法详解
2016/10/06 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
python函数返回多个值的示例方法
2013/12/04 Python
python处理图片之PIL模块简单使用方法
2015/05/11 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
pandas数据处理进阶详解
2019/10/11 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
推荐信格式要求
2014/05/09 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
关于五一放假的通知
2015/08/18 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
JS数组去重详情
2021/11/07 Javascript
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server