springboot+vue2+elementui+mybatis- 批量导出导入

全部导出

批量导出

报错问题分析

经过排查,原因是因为在发起 axios 请求的时候,没有指定响应的数据类型(这里需要指定响应的数据类型为 blob 二进制文件)

当响应数据回来后,会执行 axios 后置拦截器的代码,因为没有对响应头的类型进行判断,而是判断为字符串 String,将该流转为 JSON 对象而报错

导出的 思路分析:

1. 得到用户选中的 ids 数组(前端 vue)

2. 请求导出的后台接口

3. 根据 id,从数据库中查询记录(springboot)

4.拿到数据之后,使用流的方式,响应给浏览器/客户端

Vue2+Elementui

1.新增导出按钮

<el-button type="primary" @click="exportUsers">批量导出</el-button>

2.将选择的 ids 集合当作参数提交给后端 springboot

    //导出exportUsers() {//如果没有选择行数据,则全部导出或者按照检索条件导出this.$confirm("您是否需要导出?", "提示", {iconClass: "el-icon-question",//自定义图标样式confirmButtonText: "确认",//确认按钮文字更换cancelButtonText: "取消",//取消按钮文字更换showClose: true,//是否显示右上角关闭按钮type: "warning",//提示类型  success/info/warning/error}).then(() => {//确认操作//请求批量导出的接口this.$request.get('/user/exportUsersById', {params: { //ids携带过去,ids: this.ids //存的是勾选的id的数组},responseType: 'blob', // 设置响应类型为blob(响应的数据是二进制文件)paramsSerializer: params => {//get方法,传的参数的是数组解决uri的路径问题 ?ids[]=225&ids[]=226return qs.stringify(params, {indices: false})}}).then(response => {// console.log("response=", response)if (response.size > 0) {//返回的是blob,判断文件的大小this.$message.success("导出成功");} else {this.$message.warning("导出失败");}})}).catch(() => {//取消操作});},

3.在 axios 后置拦截器中将 blob 二进制文件转为 excel

import axios from 'axios'
import router from "@/router";
import {saveAs} from 'file-saver';//导入该依赖// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(response => {//简化.data操作 直接使用res.data就能得到数据let res = response.data;console.log("res=", res)// 判断是否为二进制数据if (response.config.responseType === 'blob') {console.log("该文件是二进制文件")// 从响应头中获取文件名const contentDisposition = response.headers.get('Content-Disposition');const filenameRegex = /filename=(.+)/const fileNameMatch = contentDisposition && contentDisposition.match(filenameRegex);const fileName = fileNameMatch && fileNameMatch[1];// 对文件名进行解码,换原成原始文件名const decodedFileName = decodeURIComponent(fileName);// 对文件名进行解码,换原成原始文件名// const decodedFileName = decodeURIComponent(fileName);// 使用FileSaver库保存文件const blob = new Blob([response.data], {type: response.headers['content-type']});// saveAs(blob, 'file.xlsx');saveAs(blob, decodedFileName || 'file.xlsx');}// // 兼容服务端返回的字符串数据//  if (typeof res === 'string') {//      res = res ? JSON.parse(res) : res//  }// //返回接口的状态码401,返回登录页面// if (res.code === '401') {//     router.push('/login')// }return res;
}, error => {console.error('response error: ' + error) // for debugreturn Promise.reject(error)
})

SpringBoot

导入 maven 依赖

<dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>4.1.2</version>
</dependency>
@RequestMapping("/exportUsersById")
public void exportUsersById(@RequestParam(value = "ids", required = false) List<Integer> ids, HttpServletResponse response) {log.info("idList=" + ids);List<User> userList;// 用户数据集合String fileName = "";// 文件名if (ObjectUtil.isEmpty(ids) || ids.contains(-1)) {// 全部导出userList = UserServiceImpls.list();fileName = "所有用户";log.info("所有用户=" + userList);if (ObjectUtil.isEmpty(userList)) { // 列表为空throw new BizException("用户列表为空");}} else {userList = UserServiceImpls.listByIds(ids);// 批量导出fileName = "部分用户";log.info("部分用户=" + userList);}// 使用huTools工具类-Excel导出ExcelWriter writer = ExcelUtil.getWriter(true);writer.write(userList, true);response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");try {// 将Content-Disposition暴露,前端才能得到Content-Disposition的value值response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "utf-8") + ".xlsx");writer.flush(response.getOutputStream(), true);} catch (IOException e) {// e.printStackTrace();} finally {writer.close();}
}

批量导入

<el-uploadstyle="display: inline-block"action="http://localhost:9000/user/importData":headers="{token:loginUSer.token}":show-file-list="false":on-success="handleFileSuccess"><el-button type="success" class="my-button">批量导入</el-button>
</el-upload>
/*** 导入数据** @param file:* @return ResultResponse<String>* @author "卒迹"* @description TODO* @date 17:32*/@PostMapping("/importData")
public ResultResponse<String> importData(MultipartFile file) throws IOException {// 写入文件流ExcelReader reader = ExcelUtil.getReader(file.getInputStream());// 以User类的格式导入数据-返回1个集合对象,这里取决于alias注解List<User> userList = reader.readAll(User.class);if (ObjectUtil.isEmpty(userList)) {// 导入的数据为空return ResultResponse.error("导入失败");}// 写入数据到数据库boolean isSave = false;try {isSave = UserServiceImpls.saveBatch(userList);} catch (Exception e) {// e.printStackTrace();return ResultResponse.error("导入出错");}return isSave ? ResultResponse.success("导入成功") : ResultResponse.error("导入失败");
}
//导入
handleFileSuccess(response, file, fileList) {console.log("response=", response)if (response.code === "2000") {this.$message.success(response.message);//刷新数据this.queryUserByUsernameOrName(this.isDisplayMsg = false, 1)}if (response.code === "-1") {this.$message.error(response.message);}},

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/303103.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux内核映像vmlinux、Image、zImage、uImage,system.map区别

编译好内核后&#xff0c;一般都会生成标题中的各种文件&#xff0c;这些文件都有什么不同呢&#xff1f; vmlinux&#xff08;elf文件&#xff09; vmlinux&#xff1a;Linux内核编译出来的原始的内核文件&#xff0c;elf格式&#xff0c;未做压缩处理。 该映像可用于定位内…

JVM—垃圾收集器

JVM—垃圾收集器 什么是垃圾 没有被引用的对象就是垃圾。 怎么找到垃圾 引用计数法 当对象引用消失&#xff0c;对象就称为垃圾。 对象消失一个引用&#xff0c;计数减去一&#xff0c;当引用都消失了&#xff0c;计数就会变为0.此时这个对象就会变成垃圾。 在堆内存中主…

基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离的企业级微服务多租户系统架构

简介 基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离的企业级微服务多租户系统架构。并引入组件化的思想实现高内聚低耦合并且高度可配置化&#xff0c;适合学习和企业中使用。 真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案&#x…

天池医疗AI大赛[第一季] Rank5解决方案

一、赛题说明 数据格式 本次大赛数据集包含数千份高危患者的低剂量肺部CT影像&#xff08;mhd格式&#xff09;数据&#xff0c;每个影像包含一系列胸腔的多个轴向切片。每个影像包含的切片数量会随着扫描机器、扫描层厚和患者的不同而有差异。原始图像为三维图像。这个三维图…

C++设计模式:抽象工厂模式(七)

1、定义与动机 抽象工厂定义&#xff1a;提供一个接口&#xff0c;让该接口负责创建一系列“相关或者相互依赖的对象”&#xff0c;无需指定它们具体的类动机&#xff1a; 在软件系统中&#xff0c;经常面临着“一系列相互依赖的对象”的创建工作&#xff1b;同时&#xff0c;…

从ChatGPT到多模态大模型:现状与未来(多模态)

ChatGPT 训练的核心技术主要包括: 预训练语言模型;有监督微调;基于人类反馈的 强 化 学 习 (ReinforcementLearningfrom Human Feedback,RLHF) 首先,通过自监督预训练使语言模型从大规模语料库中学习语言规律,具备基础 理解和生成能力;然后,通过构造指令微调数据集 并对模型进…

uniapp在发行原始云打包ios时提示私钥证书不是有效的p12文件

uniapp在发行原始云打包ios时提示私钥证书不是有效的p12文件 解决方法&#xff1a; 经过我多次的创建p12证书文件&#xff0c;然后更换设备继续创建&#xff0c;仍然存在这个问题&#xff0c;通过排查不是.p12的本身的问题&#xff0c;而是命名的问题&#xff0c;命名不能是中…

数据仓库的概念和作用?如何搭建数据仓库?

随着企业规模的扩大和数据量的爆炸性增长&#xff0c;有效管理和分析海量数据成为企业数字化转型的关键。而在互联网的普及过程中&#xff0c;信息技术已深入渗透各行业&#xff0c;逐渐融入企业的日常运营。然而&#xff0c;企业在信息化建设中面临了一系列困境和挑战&#xf…

MKS GHW-12 RF Plasma Generator Genesis 使用说明

MKS GHW-12 RF Plasma Generator Genesis 使用说明

云平台和云原生

目录 1.0 云平台 1.1.0 私有云、公有云、混合云 1.1.1 私有云 1.1.2 公有云 1.1.3 混合云 1.2 常见云管理平台 1.3 云管理的好处 1.3.1 多云的统一管理 1.3.2 跨云资源调度和编排需要 1.3.3 实现多云治理 1.3.4 多云的统一监控和运维 1.3.5 统一成本分析和优化 1.…

适用于 Mac 的 10 大数据恢复工具,具有优点、缺点

数据丢失很常见&#xff0c;并且可能由于许多不同的原因而发生。这种情况在我和我们团队的其他成员身上发生过很多次&#xff0c;即使我们格外小心我们的个人存储设备。 幸运的是&#xff0c;数据恢复软件在大多数情况下都可以工作。但是&#xff0c;由于数据丢失场景彼此之间…

主流排序简单集合

排序算法集合 选择排序 图解&#xff1a;以此类推直至 /*选择排序*/ void select_sort(vector<int>& nums) {/*选取一个基准元素逐个与后面的比较*/for (int i 0; i < nums.size() - 1-1; i) {int min i;/*定义随之变化的基准元素*/for (int j i 1; j <…

LVS+Keepalive 实现负载均衡高可用集群_lvs+keepalived

一、LVS 介绍 目前LVS已经被集成到Linux内核模块中。LVS是Linux Virtual Server的简称&#xff0c;也就是Linux虚拟服务器&#xff0c;该项目在Linux内核中实现了基于IP的数据请求负载均衡调度方案&#xff0c;终端互联网用户从外部访问公司的外部负载均衡服务器&#xff0c;终…

【项目】棋海争锋

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f4d5;格言&#xff1a;吾愚多不敏&#xff0c;而愿加学欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 项目介绍 WebSocket介绍 使用 项目创建 数据库设计 用户模块 登录接口 注册接口 获取用户信息接口 匹配模块 …

华为S5735S核心交换配置实例

以下脚本实现创建vlan2,3&#xff0c;IP划分&#xff0c;DHCP启用&#xff0c;接口划分&#xff0c;ssh,telnet,http,远程登录启用 默认用户创建admin/admin123提示首次登录需要更改用户密码 sysname test-Hxvlan 2 description to test1…

【快捷部署】016_Ollama(CPU only版)

&#x1f4e3;【快捷部署系列】016期信息 编号选型版本操作系统部署形式部署模式复检时间016Ollama&#xff08;CPU only&#xff09;latestCentOS 7.XDocker单机2024-04-10 注意事项&#xff1a; 1、目前镜像及大模型下载速度尚可&#xff0c;但由于容量较大&#xff0c;所以…

汽车4S行业的信息化特点与BI建设挑战

汽车行业也是一个非常大的行业&#xff0c;上下游非常广&#xff0c;像主机厂&#xff0c;上游的零配件&#xff0c;下游的汽车流通&#xff0c;汽车流通之后的汽车后市场&#xff0c;整个链条比较长。今天主要讲的是汽车流通&#xff0c;汽车4S集团。一个汽车4S集团下面授权代…

gitlab、jenkins安装及使用文档二

安装 jenkins IP地址操作系统服务版本192.168.75.137Rocky9.2jenkins 2.450-1.1 jdk 11.0.22 git 2.39.3192.168.75.138Rocky9.2gitlab-ce 16.10.0 结合上文 jenkins安装 前期准备&#xff1a; yum install -y epel-release yum -y install net-tools vim lrzsz wget…

【双指针】成最多水的容器

给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 示例 1&#xff1a; 输入&#xff1a;[1,…

科技云报道:从“奇点”到“大爆炸”,生成式AI开启“十年周期”

科技云报道原创。 世界是复杂的&#xff0c;没有人知道未来会怎样&#xff0c;但如果单纯从技术的角度&#xff0c;我们总是能够沿着技术发展的路径&#xff0c;找到一些主导未来趋势的脉络。 从Sora到Suno&#xff0c;从OpenAI到Copilot、Blackwell&#xff0c;这些热词在大…