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) {
   }

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

赞 (0)

相关推荐

  • 解决前后端分离 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浏览器无

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

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

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

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

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

    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+Redis实现单点登录(一处登录另一处退出登录)

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

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

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

    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部署按照及运行方法

    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

  • 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就好了. 正确写法

  • vue下拉列表功能实例代码

    最近在弄作品,做了个下拉列表.心想各位小哥哥.小姐姐可能会用到相同的需求,就把下拉列表封装一下,希望能对各位小哥哥,小姐姐有帮助 github地址: https://github.com/ClmPisces/vue-droplist 喜欢的请反手来个star,有issue的欢迎提出 安装 cnpm install vue-droplist --save 组件中导入 import DropList from 'vue-droplist' // 显示下拉列表 showDropList() { //

  • springboot+vue实现登录功能的最新方法整理

    目录 一.介绍 二.环境工具 三.搭建后端spring-boot框架 1.选择Spring Initializr创建新项目 2.CommonResult类 3.IErrorCode 接口 4.ResultCode 枚举 5.User类 6.LoginController类 7.修改DemoApplication 8.更改端口号在application.yml 9.不同端口需要解决跨域问题 四.搭建前端Vue框架 1.创建Vue项目 2.添加项目依赖框架 2.1 使用Vue项目管理器添加依赖 2.

  • elementUI+Springboot实现导出excel功能的全过程

    elementUI+Springboot实现导出excel功能的全过程

    目录 前言 步骤 依赖包 element表格table 引入包 编写方法 完整实例 最终导出结果 结语 前言 在前面,我们其实已经完成了elementUI+springboot的导入功能springboot实现上传并解析Excel过程解析那么,现在也对这个导出功能进行一个汇总整理写出来其实,导出功能相对导入功能还是比较简单,本次不需要考虑到后端 步骤 依赖包 首先,我们需要引入vue的依赖包我用的是这个 npm install xlsx@^0.16.0 npm install file-save

  • SpringBoot+Vue实现EasyPOI导入导出的方法详解

    SpringBoot+Vue实现EasyPOI导入导出的方法详解

    目录 前言 一.为什么做导入导出 二.什么是 EasyPOI 三.项目简介 项目需求 效果图 开发环境 四.实战开发 核心源码 前端页面 后端核心实现 五.项目源码 小结 前言 Hello~ ,前后端分离系列和大家见面了,秉着能够学到知识,学会知识,学懂知识的理念去学习,深入理解技术! 项目开发过程中,很大的需求都有 导入导出功能,我们依照此功能,来实现并还原真实企业开发中的实现思路 一.为什么做导入导出 为什么做导入导出 导入 在项目开发过程中,总会有一些统一的操作,例如插入数据,系统支持单个

  • vue + element-ui实现简洁的导入导出功能

    前言 众所周知,ElementUI,是一个比较完善的UI库,但是使用它需要有一点vue的基础.在开始本文的正文之前,我们先来看看安装的方法吧. 安装ElementUI模块 cnpm install element-ui -S 在main.js中引入 import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' 全局安装 Vue.use(ElementUI) 当我们安装完记得重新运行,cnpm

  • vue实现word，pdf文件的导出功能

    vue实现word或pdf文档导出的功能,我的项目是:后端返回一个文档流(下图),然后前端对文档流做处理进行下载,代码如下: import axios from 'axios'; axios.get(`url`, { //url: 接口地址 responseType: `arraybuffer` //一定要写 }) .then(res => { if(res.status == 200){ let blob = new Blob([res.data], { type: `application/

  • Springboot+Vue+shiro实现前后端分离、权限控制的示例代码

    本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelAndView,逐渐有了前后端分离的想法,由于之前,没有接触过,主要参考的还是网上的一些博客教程等,初步完成了前后端分离,在此记录以备查阅. 一.前后端分离思想 前端从后端剥离,形成一个前端工程,前端只利用Json来和后端进行交互,后端不返回页面,只返回Json数据.前后端之间完全通过public A

  • vue中后端做Excel导出功能返回数据流前端的处理操作

    项目中有一个导出功能的实现,用博客来记录一下.因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来. 先看下效果图: 页面效果: 点击 导出Excel 调用导出接口成功了: 后台返回的数据流,一堆看不懂的乱码: 接下来要处理这堆乱码,因为用到的地方多,所以在util.js文件里封装了一个公共方法并抛出: 虽然vue里有封装好的请求接口的方法,但这里要单独用axios,所以先在util.js里引入axios import

  • springboot+vue实现登录功能

    springboot+vue实现登录功能

    本文实例为大家分享了springboot+vue实现登录功能的具体代码,供大家参考,具体内容如下 目录结构 前端端口:8080 后端端口:8900 login.vue <template> <div class="login_content"> <!-- 登录块 --> <div class="login_box"> <!-- 头像 --> <div class="avatar_box&qu

随机推荐