当前位置: 首页 > article >正文

Excel导出功能:vue2+SpringBoot

前提:
需要阅读者能够掌握EasyExcel(很简单,b站有很多视频)
提示:
下述,是我在csdn上,手打的,可能有些字母问题

##前端

Vue文件中

导入file-saver、element-ui

import {saveAs} from 'file-saver'
import {Loading} from 'element-ui'

data中设置数据:
sceneName这个是查询条件,可以根据查询条件导出
loading用于在导入过程的加载页面

data(){
return {
queryData: {
sceneName: '',
},
loading: false
}
}
//导出按钮绑定方法
handleExport()
{
this.loading = Loading.service({
fullscreen:true,
lock: true,
text: '数据导出中,请稍后',
background: 'rgba(0,0,0,0,7)',
})
//这是因为我把api给vue管理了
this.$api.uc.CaryApi.exportCqry(this.queryData)
	.then((res)=>{
	const isBlob=(res.type!='application/json')
	//文件资源返回对象一般是blob
	if(isBlob){
	const blob = new([res])
	saveAs(blob,'test.xlsx')//这里我将所有导出的文件名都定义为了test.xlsx
	}else{
	//异常处理我就简单写了
	console.log('返回结果是application.json')
	}
	//这里把加载页面退出
	this.loading.close()
	}).catch((err)=>{
	console.log(err)
	this.loading.close()
})
}

下面写我的axios请求

const headers = {
'Content-Type': 'application/x-www-form-urlencoded'
}
//下面的request其实就是axios封装之后的对象,一般公司项目,都会封装axios的就不写了
export default{
exportCqry(queryData){
return request({
headers,
url: 'icmc-cust-center-service/admin/v1/query/config/scene/export?sceneName='+queryData.sceneName,
method: 'post',
timeout: 120000,
responseType: 'blob'//请求返回应为blob
})
}

}

上述就是前端
下面写后端

##后端
接口

@PostMapping("/scene/export")
public ApiResult exportCqry(@RequestBody String sceneName,HttpServletResponse response)throws IOException{
List<SceneConf> list = 
		sceneConfService.listSceneConf(sceneName);
	ServletOutput outputStrea =
		response.getOutputStream();
	try{
	 //设置内容类型
        response.setContentType("application/vnd.vnd.ms-excel");
        //设置编码格式
        response.setCharacterEncoding("utf-8");
        //设置导出文件名称(避免乱码)
        String fileName = URLEncoder.encode(rawFileName.concat(".xlsx"), "UTF-8");
        // 设置响应头
        response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName);
        //这个实现方式非常简单直接,使用EasyExcel的write方法将查询到的数据进行处理,以流的形式写出即可
            EasyExcel.write(outputStream,SceneConf.class)//对应的导出实体类
                    .excelType(ExcelTypeEnum.XLSX)//excel文件类型,包括CSV、XLS、XLSX
                    .sheet("用户列表")//导出sheet页名称
                    .doWrite(list); //查询获取的数据集合
	}catch(IOException e){
	}finally{
	outputStream.flush();
	outputStream.close();
	}
	return ApiResult.OK_EMPTY;
}

http://www.kler.cn/a/467352.html

相关文章:

  • 【three.js】场景搭建
  • 前端工程化之手搓webpack5 --【elpis全栈项目】
  • 关于 webservice 日志中 源IP是node IP的问题,是否能解决换成 真实的客户端IP呢
  • SpringBoot+Vue养老院管理系统设计与实现【开题报告+程序+安装部署+售后讲解】
  • 东京大学联合Adobe提出基于指令的图像编辑模型InstructMove,可通过观察视频中的动作来实现基于指令的图像编辑。
  • Level DB --- BloomFilterPolicy
  • 4.3 最短路径问题:Dijkstra、Floyd
  • tensorflow 内存错误
  • NS4866 500mA 多功能锂电池充放电管理IC
  • django vue3实现大文件分段续传(断点续传)
  • unity学习3:如何从github下载开源的unity项目
  • 数字0、字符‘0’、转义字符‘\0’、NULL有什么区别?
  • Profinet转EtherNet/IP网关连接AB PLC的应用案例
  • Word如何设置整段背景色
  • 成立一家无人机培训机构需要哪些基础配置
  • 机器学习 - 线性回归
  • Http基础认证摘要认证
  • uniapp实现后端数据i18n国际化
  • [CTF/网络安全] 攻防世界 get_post 解题详析
  • 基于Java+Netty搞了个类似teamviewer、向日葵、ToDesk的远程桌面工具
  • 【顶刊TPAMI 2025】多头编码(MHE)之极限分类 Part 1:背景动机
  • Ruby 中文编码
  • 【竞技宝】CS2:HLTV 2024 TOP11-w0nderful
  • Tailwind CSS 使用简介
  • 基于SpringBoot在线竞拍平台系统功能实现十五
  • 【Linux】定时运行shell脚本