一后端代码

1 创建 excel 的导出实体

package com.baiyee.sdgt.vo.cmn;import com.alibaba.excel.annotation.ExcelProperty;
import lombok.Data;/**
* @className: DictEeVo
* @description: 用于导入和导出excel
* @date: 2021/10/12
* @author: cakin
*/
@Data
public class DictEeVo {@ExcelProperty(value = "id", index = 0)private Long id;@ExcelProperty(value = "上级id", index = 1)private Long parentId;@ExcelProperty(value = "名称", index = 2)private String name;@ExcelProperty(value = "值", index = 3)private String value;@ExcelProperty(value = "编码", index = 4)private String dictCode;
}

2 导出接口

// 导出数据字典接口
void exportDictData(HttpServletResponse response);

3 实现类

// 导出数据字典接口
@Override
public void exportDictData(HttpServletResponse response) {//设置下载信息response.setContentType("application/vnd.ms-excel");response.setCharacterEncoding("utf-8");String fileName = "dict";response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx");// 查询数据库List<Dict> dictList = baseMapper.selectList(null);// Dict -- DictEeVoList<DictEeVo> dictVoList = new ArrayList<>();for (Dict dict : dictList) {DictEeVo dictEeVo = new DictEeVo();// dictEeVo.setId(dict.getId());BeanUtils.copyProperties(dict, dictEeVo);dictVoList.add(dictEeVo);}// 调用方法进行写操作try {EasyExcel.write(response.getOutputStream(), DictEeVo.class).sheet("dict").doWrite(dictVoList);} catch (IOException e) {e.printStackTrace();}
}

4 控制器

// 导出数据字典接口
@GetMapping("exportData")
public void exportDict(HttpServletResponse response) {dictService.exportDictData(response);
}

二前端页面

<template><div class="app-container"><!-- 导出功能 --><div class="el-toolbar"><div class="el-toolbar-body" style="justify-content: flex-start;"><el-button type="text" @click="exportData"><i class="fa fa-plus" /> 导出</el-button></div></div><!-- 列表功能 --><el-table:data="list"style="width: 100%"row-key="id"borderlazy:load="getChildrens":tree-props="{children: 'children', hasChildren: 'hasChildren'}"><el-table-column label="名称" width="230" align="left"><template slot-scope="scope"><span>{{ scope.row.name }}</span></template></el-table-column><el-table-column label="编码" width="220"><template slot-scope="{row}">{{ row.dictCode }}</template></el-table-column><el-table-column label="值" width="230" align="left"><template slot-scope="scope"><span>{{ scope.row.value }}</span></template></el-table-column><el-table-column label="创建时间" align="center"><template slot-scope="scope"><span>{{ scope.row.createTime }}</span></template></el-table-column></el-table></div>
</template><script>
import dict from "@/api/dict";
export default {data() {return {list: [] //数据字典列表数组};},created() {this.getDictList(1);},methods: {// 数据字典列表getDictList(id) {dict.dictList(id).then(response => {this.list = response.data;});},getChildrens(tree, treeNode, resolve) {dict.dictList(tree.id).then(response => {resolve(response.data);});},// 导出功能exportData() {window.location.href = "http://localhost:8202/admin/cmn/dict/exportData";}}
};
</script>

三测试效果

点击导出后，可以正常导出

vue 实现 excel 的导出功能相关推荐

VUE的Excel导入导出功能
在做人力资源管理的后台项目时,实现了excel表的导入导出功能.用到了vue-element-admin提供的框架(链接地址 ),我们只需要在自己的项目中封装改造即可. 项目中实现excel表的导入与 ...
SpringBoot中使用Easyexcel实现Excel导入导出功能（三）
导出的数据包含有图片导出excel表格的数据包含有图片,这种场景比较少.通Easyexcel实现这样的需求,我认为最简便的方法就是使用前面提到的自定义转换器(com.alibaba.excel.co ...
SpringBoot中使用Easyexcel实现Excel导入导出功能（一）
目录前言 1.常规导入 2.读取到指定的列 3.读取全部的sheet页 4.日期.数字及其他自定义格式的转换 5.表头有多行的表格读取 6.表头数据的读取 7.单元格内的备注内容读取前言 exce ...
如何优雅地实现 Excel 文件导出功能？（阿里出品的 EasyExcel，安利一波）
EasyExcel 前言导出是后台管理系统的常用功能,当数据量特别大的时候会内存溢出和卡顿页面,曾经自己封装过一个导出,POI百万级大数据量EXCEL导出采用了分批查询数据来避免内存溢出和使用SX ...
vue中实现Excel导入导出功能
导入Excel功能前置条件: 依赖包xlsx npm install xlsx -S 这里提供一个现成的在vue中导入Excel的功能(原作者-花裤衩),代码在最下面,可直接复制. 创建一个文件夹, ...
前端 - excel导入 / 导出功能
1. 导入功能 1.1 前端主导(工作大量在前端) 上传excel文件,把excel文件的内容读出来,还原成最基本的行列结构,按后端的接口要求回传过去. 前端读excel文件,调接口 1.2 后端主导 ...
@excel注解_惊了！如何通过阿里 EasyExcel 7 行代码, 优雅地实现 Excel 文件导出功能？...
目录一.前言二.Apache poi.jxl 的缺陷三.阿里出品的 EasyExcel,安利一波四.EasyExcel 解决了什么五.快速上手六.特殊场景支持七.Web 下载示例代码八 ...
linux脚本的数据输出到excel,使用shell实现Excel表格导出功能 | 剑花烟雨江南
在Web项目中,我们经常会遇到Excel表格导出的功能,对于一些数据实时性要求不高的.逻辑相对简单的导出,是否可用通过shell脚本的方式来进行导出,从而降低开发成本呢? 我们都知道,CSV格式可以用 ...
7 行代码优雅地实现 Excel 文件导出功能？
文章目录一.前言二.Apache poi.jxl 的缺陷三.阿里出品的 EasyExcel,安利一波四.EasyExcel 解决了什么五.快速上手 5.1 添加依赖 5.2 七行代码搞定 E ...

vue 实现 excel 的导出功能

一后端代码

1 创建 excel 的导出实体

2 导出接口

3 实现类

4 控制器

二前端页面

三测试效果

vue 实现 excel 的导出功能相关推荐

最新文章

热门文章

vue 实现 excel 的导出功能

一 后端代码

1 创建 excel 的导出实体

2 导出接口

3 实现类

4 控制器

二 前端页面

三 测试效果

vue 实现 excel 的导出功能相关推荐

最新文章

热门文章

一后端代码

二前端页面

三测试效果