vue通过接口直接下载java生成好的Excel表格案例


Posted in Javascript onOctober 26, 2020

通过浏览器直接访问导出接口就会自动下载创建好的 Excel 表格。但是我们在vue里使用axios请求接口,一般是处理json数据,如果要处理文件流数据,需要做下特殊处理即可直接下载文件。

假如 下载Excel接口为:/apis/downExcel,则请求如下

import axios from 'axios'
 
export const exportFile = params => {
 var param = new URLSearchParams()
 param.append('beginTime', params.beginTime)
 param.append('endTime', params.endTime)
 return axios({
  method: 'post',
  data: param,
  url: '/apis/downExcel',
  responseType: 'blob'
 })
}

下载按钮触发下载方法如下:

downExcel() {
 var params = {
  beginTime: this.times[0],
  endTime: this.times[1]
 };
 exportFile(params).then(
  data => {
   /** 获取生成设置好的文件名 */
   var filename = data.headers["content-disposition"];
   filename = filename.split("=")[1];
   filename = decodeURIComponent(filename, "utf-8");
   /** 接收文件流 */
   const blob = new Blob([data.data]);
   let url = URL.createObjectURL(blob);
   /** 模拟浏览器操作Document,并模拟下载动作 */
   let link = document.createElement("a");
   link.style.display = "none";
   link.href = url;
   link.setAttribute("download", filename);
   document.body.appendChild(link);
   link.click();
  },
  error => {
   console.log(error);
   this.$message.error("下载异常,请稍后再试");
  });
}

这样就可以在vue项目中完整下载Excel接口,当然vue也有生成Excel的插件,接收后台的json数据然后在前端生成并下载。

补充知识:Vue实现通过后端接口导出Excel表格

需求:后端提供下载接口,返回二进制文件流,前端导出为xlsx格式的Excel表格

实现:

1、按钮调用下载接口

2、new Blob导出

vue通过接口直接下载java生成好的Excel表格案例

vue通过接口直接下载java生成好的Excel表格案例

PS:

1、第一步请求接口时,注意要设置请求responseType为blob类型,否则下载后,显示格式错误,无法打开

2、new Blob请求是,注意修改type类型为application/vnd.ms-excel

vue通过接口直接下载java生成好的Excel表格案例

vue通过接口直接下载java生成好的Excel表格案例

以上这篇vue通过接口直接下载java生成好的Excel表格案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
js定时器实例分享
Dec 20 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 #Javascript
原生js实现贪吃蛇游戏
Oct 26 #Javascript
JavaScript实现五子棋小游戏
Oct 26 #Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 #Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 #Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 #Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 #Javascript
You might like
松下Panasonic RF-B65电路分析
2021/03/02 无线电
Cannot modify header information错误解决方法
2008/10/08 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
经验几则 推荐
2006/09/05 Javascript
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
pageGroup.js实现分页功能
2019/07/27 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
Python2.x中文乱码问题解决方法
2015/06/02 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
eBay奥地利站:eBay.at
2019/07/24 全球购物
.net面试题
2016/09/17 面试题
学习新党章思想汇报
2014/01/09 职场文书
增员口号大全
2014/06/18 职场文书
安全生产月标语
2014/10/07 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
试用期辞职信范文
2015/03/02 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书