Springboot vue导出功能实现代码

最近在工作遇到vue和Springboot 实现导出功能,翻看很多资料,发现一些博客写法都过时了,所以自己特此记录下,使用版本vue2,Springboot 2x以上,chrome浏览器 76.0.3809.100

vue 2写法

let blob = new Blob([res.data], { type: ‘application/octer-stream’ });

其中我发现很多博客用这样的写法,但是我发现打印res的时候没有发现data这个参数,总是报错后面直接用res就好了。

正确写法let blob = new Blob([res], { type: ‘application/octer-stream’ });

科普一下:axios中params和data两者,以为他们是相同的,实则不然。 因为params是添加到url的请求字符串中的,而data是添加到请求体(body)中的,最好使用params参数

import axios from 'axios'
axios({
	method: 'post',
	 url: '/user/excelExport',
	 responseType:‘blob',
	 params
}
).then(res => {
const link = document.createElement('a')
let blob = new Blob([res], { type: 'application/octer-stream' });
link.style.display = 'none'
link.href = URL.createObjectURL(blob);
link.setAttribute('download', fileName + '.xlsx');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
).catch(err => {
console.log(err)
}
);

后台代码写法 ——使用阿里巴巴的excel导出类easyexcel https://github.com/alibaba/easyexcel

<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>{latestVersion}</version>
</dependency>
//这里可以不用关闭流,流在方法结束,会自动关闭,通过配置product,指定返回头
   @PostMapping(path = "/user/excelExport", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
   public void excelExport(WithdrawListDto withdrawListDto, HttpServletResponse response) {
       List<WithdrawListVo> list = withdrawService.list(withdrawListDto);
       ExcelWriter writer = new ExcelWriter(response.getOutputStream(), ExcelTypeEnum.XLSX, true);
       Sheet sheet1 = new Sheet(1, 0, WithdrawListVo.class);
       sheet1.setSheetName("sheet1");
       writer.write(list, sheet1);
   }

PostMapping,加上返回头了。前端传过来的context-Type 要加上multipart/form-data 类型,然后在前端传过来的url进行拼接参数,就可以进行多参数,但是不建议参数太多

例子:如/user/excelImport?account=12731564&userName=李四

@PostMapping(path = "/user/excelImport")
   public void excelImport(WithdrawListDto withdrawListDto,MultipartFile multipartFile) {
   }

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

时间:2020-04-29

解决Vue调用springboot接口403跨域问题

最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题 前端跨域请求已解决, 那么问题就出在后端了, 找了一些资料找到了很多种方法, 这里说两个简单粗暴的. 注意:"@CrossOrigin"注解要求jdk1.8及以上版本, SpringMVC 4.2及以上版本 1. 在controller层上添加@Configuration注解, 如果没有效果请制定RequestMapping总的method类型

vue+springboot图片上传和显示的示例代码

一.前言 在使用spring boot做后台系统,vue做前端系统,给客户开发一套系统时候,其中用到了图片上传和显示的功能. 二.环境 前端:vue 前端组件:tinymce 后台:spring boot:2.2.3 三.正文 在客户开发一套门户管理系统时,集成了tinymce组件,用于编辑内容,springboot不同于其他项目.  是集成tomcat的,文件和图片是不能直接访问的.所以我在做集成富文本编辑器时,需要处理图片的问题. 这个问题跟上传头像等显示图片的功能是类似的.下面记录详情步骤

springboot + vue 实现递归生成多级菜单(实例代码)

开发过程中,涉及到多级菜单的应用,找了一些资料案例实现如下(使用springboot+layui+oracle): 创建菜单表 : — 创建菜单表 create table wxmini_menus( menu_id number unique, –菜单ID menu_name varchar2(20), menu_url varchar2(200), menu_icon varchar2(100), parent_id number, –父菜单ID status varchar2(10)

springboot+vue部署按照及运行方法

1 环境部署 1.1 jdk-8u111-windows-x64 环境变量 JAVA_HOME:C:/Program Files/Java/jdk1.8.0_111 Path新增一行:%JAVA_HOME%/bin 1.2 apache-maven-3.5.0-bin,直接解压到C:/Program Files/Java 环境变量 MAVEN_HOME:C:/Program Files/Java/apache-maven-3.5.0 Path新增一行:%MAVEN_HOME%/bin 1.3 G

解决前后端分离 vue+springboot 跨域 session+cookie失效问题

环境: 前端 vue ip地址:192.168.1.205 后端 springboot2.0 ip地址:192.168.1.217 主要开发后端. 问题: 首先登陆成功时将用户存在session中,后续请求在将用户从session中取出检查.后续请求取出的用户都为null. 解决过程: 首先发现sessionID不一致,导致每一次都是新的会话,当然不可能存在用户了.然后发现cookie浏览器不能自动保存,服务器响应set-cookie了 搜索问题,发现跨域,服务器响应的setCookie浏览器无

springboot整合vue实现上传下载文件

springboot整合vue实现上传下载文件,供大家参考,具体内容如下 环境 springboot 1.5.x 完整代码下载:springboot整合vue实现上传下载 1.上传下载文件api文件 设置上传路径,如例子: private final static String rootPath = System.getProperty("user.home")+File.separator+fileDir+File.separator; api接口: 下载url示例:http://l

SpringBoot+Vue+Redis实现单点登录(一处登录另一处退出登录)

一.需求 实现用户在浏览器登录后,跳转到其他页面,当用户在其它地方又登录时,前面用户登录的页面退出登录(列如qq挤号那种方式) 二.实现思路 用户在前端填写用户信息登录后,后台接收数据先去数据库进行判断,如果登录成功,创建map集合,以用户id为键,token为值,先通过当前登录用户的id去获取token,如果token存在说明该用户已经登录过,调用redis以token为键删除上个用户的信息,调用方法生成新token,并将token存入map集合,将用户信息存入redis,并将token存入c

基于springboot和redis实现单点登录

本文实例为大家分享了基于springboot和redis实现单点登录的具体代码,供大家参考,具体内容如下 1.具体的加密和解密方法 package com.example.demo.util; import com.google.common.base.Strings; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import javax.crypto.Cipher; import javax.crypto.KeyG

使用springboot结合vue实现sso单点登录

Springboot vue导出功能实现代码

本文实例为大家分享了springboot vue实现sso单点登录的具体代码,供大家参考,具体内容如下 项目结构: 开发工具:idea, maven3 静态文件下载地址 1.pom文件: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.or

Vue利用路由钩子token过期后跳转到登录页的实例

在Vue2.0中的路由钩子主要是用来拦截导航,让它完成跳转或前取消,可以理解为路由守卫. 分为全局导航钩子,单个路由独享的钩子,组件内钩子. 三种 类型的钩子只是用的地方不一样,都接受一个函数作为参数,函数传入三个参数,分别为to,from,next. 其中next有三个方法 (1)next(); //默认路由 (2)next(false); //阻止路由跳转 (3)next({path:’/’}); //阻止默认路由,跳转到指定路径 这里我使用了组件内钩子进行判断token过期后跳转到登录页,

redis+php实现微博(一)注册与登录功能详解

本文实例讲述了redis+php实现微博注册与登录功能.分享给大家供大家参考,具体如下: (一).微博功能概况 微博用户账号注册 微博用户登录 微博发布 添加微博好友(粉丝) 微博推送 微博冷数据写入mysql数据库 (二).redis数据结构设计 这节分享微博用户注册与登录: 我们完全采用redis作为数据库来实现注册于登录 先来看一下redis数据结构的设计: 注册用户表:user set global:userid set user:userid:1:username zhangshan

Vue退出登录时清空缓存的实现

如下所示: <template> <div id="main" class="app-main"> <router-view></router-view> </div> </template> <script> export default { data () { return { theme: this.$store.state.app.themeColor }; }, mount

vue中js判断长时间不操作界面自动退出登录(推荐)

需求说明,后台有做半个小时不请求接口的话返回标识退出登录,但是要请求接口才行,现在要实现前端用js判断半个小时不操作界面的话自动跳转到登录页面. 创建一个.js文件,在main.js引入此js(vue框架) 在登录成功的时候保存当前时间localStorage.setItem("lastTime",new Date().getTime()); 然后在点击的时候更新这个时间 var lastTime = new Date().getTime(); var currentTime = ne

SpringBoot使用Redis缓存的实现方法

(1)pom.xml引入jar包,如下: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId> </dependency> (2)修改项目启动类,增加注解@EnableCaching,开启缓存功能,如下: package springboot; import org

SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法

Springboot vue导出功能实现代码

当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助.本系列文章并不是手把手的教程,主要介绍了核心思路并讲解了核心代码,完整的代码小伙伴们可以在GitHub上star并clone下来研究.另外,原本计划把项目跑起来放到网上供小伙伴们查看,但是之前买服务器为了省钱,内存只有512M,两个应用跑不起来(已经有一个V部落开

Springboot使用redis进行api防刷限流过程详解

这篇文章主要介绍了Springboot使用redis进行api防刷限流过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 api限流的场景 限流的需求出现在许多常见的场景中 秒杀活动,有人使用软件恶意刷单抢货,需要限流防止机器参与活动 某api被各式各样系统广泛调用,严重消耗网络.内存等资源,需要合理限流 淘宝获取ip所在城市接口.微信公众号识别微信用户等开发接口,免费提供给用户时需要限流,更具有实时性和准确性的接口需要付费. api限流实

原文 

https://www.zhangshengrong.com/p/QrXebL5L1d/

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » Springboot vue导出功能实现代码

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址