需要技术EasyExcel支持：https://www.yuque.com/easyexcel/doc/easyexcel
效果预览 代码奉上
Vue页面 带选中框的表格是直接从element-ui官网复制过来的 选中数据->选中的数据存放在data中的json_data变量中 点击导出Excel->将data中json_data的数据处理成后端想要的格式使用JSON.stringify()转化成Json字符串发送给后端接口
带选中框的表格
<template> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table> <div style="margin-top: 20px"> <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> <el-button @click="toggleSelection()">取消选择</el-button> </div> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-08', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-07', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], multipleSelection: [] } }, methods: { toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, handleSelectionChange(val) { this.multipleSelection = val; } } } </script>导出Excel按钮
<el-button type="primary" icon="el-icon-edit" @click="export_excel()" style="margin-top: 25px;">导出选中订单.Excel</el-button>按钮绑定的点击事件方法
//导出选中Excel export_excel(){ const h = this.$createElement; if (this.json_data.length==0){ //如果没有选中任何数据 this.$notify({ type: 'error', title: '导出失败', message: h('i', { style: 'color: red'}, "您还没有选中任何订单数据") }); return "sda"; } let params=new URLSearchParams(); //处理封装orderData对象 let orderDatas=[]; for (let i = 0; i < this.json_data.length; i++) { let order_data=this.json_data[i]; let orderData={}; let costStatus=""; switch (order_data.costStatus) { case 0:costStatus="未支付";break; case -1:costStatus="乘客取消";break; case -2:costStatus="管理员取消";break; case -3:costStatus="系统取消";break; case -4:costStatus="失败";break; case 1:costStatus="已支付";break; case 2:costStatus="派车中";break; case 3:costStatus="进行中";break; case 4:costStatus="订单完成";break; } if(order_data.client==null){ orderData={origin:order_data.origin,destination:order_data.destination,beginTime:order_data.beginTime,endTime:order_data.endTime,node:"暂时没有备注",clname:"已删除",clphone:"已删除",clidCard:"已删除",sname:order_data.seller.ename,cost:order_data.cost,costStatus:costStatus}; }else { orderData={origin:order_data.origin,destination:order_data.destination,beginTime:order_data.beginTime,endTime:order_data.endTime,node:"暂时没有备注",clname:order_data.client.clname,clphone:order_data.client.clphone,clidCard:order_data.client.clidcard,sname:order_data.seller.ename,cost:order_data.cost,costStatus:costStatus}; } orderDatas[i]=orderData; } params.append("orderDatas",JSON.stringify(orderDatas)); let _this=this; this.axios.post("/file/download",params) .then(res=>{ this.$notify({ type: 'success', title: '导出成功', message: h('p', null, [ h('i', { style: 'color: red' }, 'Go+订单.xlsx'), h('span', null, ' 成功导出到'), h('i', { style: 'color: teal' }, res.data) ]) }); }).catch(function(error) { _this.$notify({ type: 'error', title: '下载失败', message: h('i', { style: 'color: red'}, "请检查文件是不是已经存在或打开") }); }); },Controller层接口 将传递过来的JSON字符串转换成OrderData类型的List集合使用在Excel doWrite()导出中
需要先导入EasyExcel依赖
<!-- https://mvnrepository.com/artifact/com.alibaba/easyexcel --> <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>2.2.6</version> </dependency>接口
String PATH="D:\\谷歌下载\\"; /** * 将传递过来的JSON字符串转换成OrderData类型的List集合使用在Excel doWrite()导出中 * @param orderDatas * @return */ @RequestMapping("/download") public String downloadExcel(String orderDatas) { // 写法1 String fileName = PATH+ ExcelDateUtils.getDateString("go+订单模板") +".xlsx"; // 这里 需要指定写用哪个class去写，然后写到第一个sheet，名字为模板 然后文件流会自动关闭 // write(fileName, 格式类) //sheet (表名) //doWrite(数据) List orderList = JSON.parseArray(orderDatas,OrderData.class); EasyExcel.write(fileName, OrderData.class).registerWriteHandler(new LongestMatchColumnWidthStyleStrategy()).sheet("模板").doWrite(orderList); return PATH; }效果预览 代码奉上
Vue导入按钮 element-ui官网的按钮action绑定事件 点击按钮->选择文件->调用后台接口->调用上传成功方法->异步刷新表格https://blog.csdn.net/liudachu/article/details/109207192
<el-upload class="upload-demo" action="/api/file/upload" :on-success="upload_success" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList"> <el-button type="primary">点击导入Excel文件</el-button> </el-upload>按钮绑定的方法
/*Excel上传成功！*/ upload_success(file, fileList){ const h = this.$createElement; this.$notify({ type: 'success', title: '导入成功', message: h('p', null, [ h('i', { style: 'color: teal' }, file), h('span', null, ' 成功导入！'), ]) }); //异步刷新 this.reload(); }, handleRemove(file, fileList) { console.log(file, fileList); }, handlePreview(file) { console.log(file); }, handleExceed(files, fileList) { this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`); }, beforeRemove(file, fileList) { return this.$confirm(`确定移除 ${ file.name }？`); },Controller接口： 1.获取传递过来的CommonsMultipartFile文件 2.保存文件到(上传路径)服务器 3.使用EasyExcel读取Excel文件，并调用Listenter进行数据库数据的导入
@Autowired private FileMapper fileMapper; /** * 1.获取传递过来的CommonsMultipartFile文件 * 2.保存文件到(上传路径)服务器 * 3.使用EasyExcel读取Excel文件，并调用Listenter进行数据库数据的导入 * @param file * @return * @throws IOException */ @RequestMapping("/upload") public String uploadExcel(@RequestParam("file") CommonsMultipartFile file) throws IOException { //获取文件名 : file.getOriginalFilename(); String uploadFileName = file.getOriginalFilename(); /** * 使用springmvc中的CommonsMultipartFile进行文件的保存 */ //上传路径保存设置 String path = "D:\\谷歌下载\\GO+订单\\"; File realPath = new File(path); if (!realPath.exists()){ realPath.mkdir(); } //上传文件地址 // System.out.println("上传文件保存地址："+realPath); //通过CommonsMultipartFile的方法直接写文件（注意这个时候） file.transferTo(new File(realPath +"/"+ uploadFileName)); /** * 使用EasyExcel读取Excel文件 进行数据的导入 */ EasyExcel.read(path+uploadFileName, OrderData.class, new OrderDataListener(fileMapper)).sheet().doRead(); //返回文件名 return uploadFileName; }Listener
package com.chif.excel; import com.alibaba.excel.context.AnalysisContext; import com.alibaba.excel.event.AnalysisEventListener; import com.chif.dao.FileMapper; import com.chif.pojo.OrderData; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import java.util.ArrayList; import java.util.Date; import java.util.List; // 有个很重要的点 OrderDataListener 不能被spring管理，要每次读取excel都要new,然后里面用到spring可以构造方法传进去 public class OrderDataListener extends AnalysisEventListener<OrderData> { private static final Logger LOGGER = LoggerFactory.getLogger(OrderDataListener.class); /** * 每隔5条存储数据库，实际使用中可以3000条，然后清理list ，方便内存回收 */ private static final int BATCH_COUNT = 5; List<OrderData> list = new ArrayList<OrderData>(); /** * 假设这个是一个DAO，当然有业务逻辑这个也可以是一个service。当然如果不用存储这个对象没用。 */ //private DemoDAO demoDAO; private FileMapper fileMapper; /* public OrderDataListener() { // 这里是demo，所以随便new一个。实际使用如果到了spring,请使用下面的有参构造函数 demoDAO = new DemoDAO(); }*/ /** * 如果使用了spring,请使用这个构造方法。每次创建Listener的时候需要把spring管理的类传进来 * * @param fileMapper */ public OrderDataListener(FileMapper fileMapper) { this.fileMapper = fileMapper; } /** * 这个每一条数据解析都会来调用 * * @param data * one row value. Is is same as {@link AnalysisContext#readRowHolder()} * @param context */ @Override public void invoke(OrderData data, AnalysisContext context) { //System.out.println(JSON.toJSONString(data)); data.setCreateTime(new Date()); list.add(data); // 达到BATCH_COUNT了，需要去存储一次数据库，防止数据几万条数据在内存，容易OOM if (list.size() >= BATCH_COUNT) { saveData(); // 存储完成清理 list list.clear(); } } /** * 所有数据解析完成了 都会来调用 * * DemoData 类型 * AnalysisContext 分析上下文 * @param context */ @Override public void doAfterAllAnalysed(AnalysisContext context) { // 这里也要保存数据，确保最后遗留的数据也存储到数据库 saveData(); LOGGER.info("所有数据解析完成！"); } /** * 加上存储数据库 */ private void saveData() { LOGGER.info("{}条数据，开始存储数据库！", list.size()); fileMapper.addOrdersByList(list); LOGGER.info("存储数据库成功！"); } }调用的持久层mapper
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.chif.dao.FileMapper"> <insert id="addOrdersByList" parameterType="java.util.List"> insert into db_go.t_order (origin, destination, begin_time, end_time, node, client_id, bus_id, seller_id, cost, cost_status, create_time) values <foreach collection="list" item="item" index="index" separator="," > (#{item.origin},#{item.destination},#{item.beginTime},#{item.endTime},#{item.node}, (select cl_id from db_go.t_client where cl_name=#{item.clname}), 1, (select e_id from db_go.t_emp where e_name=#{item.sname}), #{item.cost}, (select id from t_status where status=#{item.costStatus}), #{item.createTime}) </foreach> </insert> </mapper>完结
