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 相关文章推荐
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
vue component组件使用方法详解
Jul 14 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
vue循环数组改变点击文字的颜色
Oct 14 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 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
input file获得文件根目录简单实现
2013/04/26 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
JavaScript实现轮播图特效
2020/04/10 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
使用grappelli为django admin后台添加模板
2014/11/18 Python
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
Python中的集合介绍
2019/01/28 Python
法国体育用品商店:GO Sport
2019/10/23 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
给导游的表扬信
2014/01/10 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
文明家庭事迹材料
2014/12/20 职场文书
走进科学观后感
2015/06/18 职场文书
Django 如何实现文件上传下载
2021/04/08 Python