目录
实现效果:
1、Vue端(查询数据)
1.1、导出按钮添加点击事件
<el-button
type="warning"
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button>
1.2、定义导出方法
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams
this.$confirm('是否确认导出所有用户数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(function() {
return exportUser(queryParams)
})
.then(response => {
this.download(response.msg)
})
.catch(function() {})
}
补充:
exportUser(queryParams):导出的数据可以通过 搜索框中的条件 来查询数据
1.3、确认框
在 src / plugins / element.js 中添加确认框
import { MessageBox } from 'element-ui'
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$confirm = MessageBox.confirm
1.4、引入 导出用户方法(即 exportUser方法)
在 src / views / system / user / index.vue 中
import { exportUser } from '@/api/system/user'
1.5、定义导出用户方法
在 src / api / system / user.js 文件中
import request from '@/utils/request'
// 导出用户
export function exportUser(query) {
return request({
url: '/system/user/export',
method: 'get',
params: query
})
}
2、Vue端(下载数据)
2.1、定义通用的下载方法
在 src / utils / ruoyi.js 中
const baseURL = 'http://127.0.0.1:8888/ruoyi'
// 通用下载方法
export function download(fileName) {
window.location.href = baseURL + '/common/download?fileName=' + encodeURI(fileName) + '&delete=' + true
}
2.2、全局挂载下载方法
在 src / main.js 中
import { download } from '@/utils/ruoyi'
Vue.prototype.download = download
2、SpringBoot后台
2.1、导入依赖
<poi.version>3.17</poi.version>
<commons.io.version>2.5</commons.io.version>
<commons.fileupload.version>1.3.3</commons.fileupload.version>
<!-- excel工具 -->
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml</artifactId>
<version>${poi.version}</version>
</dependency>
<!--io常用工具类 -->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>${commons.io.version}</version>
</dependency>
<!--文件上传工具类 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>${commons.fileupload.version}</version>
</dependency>
2.2、Controller层处理导出方法
package com.ruoyi.project.system.controller;
/**
* 用户信息
*
* @author ruoyi
*/
@RestController
@RequestMapping("/system/user")
@CrossOrigin
public class SysUserController extends BaseController {
@Resource
private ISysUserService userService;
@GetMapping("/export")
public AjaxResult export(SysUser user) {
List<SysUser> list = userService.selectUserList(user);
ExcelUtil<SysUser> util = new ExcelUtil<SysUser>(SysUser.class);
return util.exportExcel(list, "用户数据");
}
}
补充:
userService.selectUserList :条件查询用户方法不是本章重点,所以不深入讲解。
2.3、导出工具类
package com.ruoyi.common.utils.poi;
/**
* Excel相关处理
*
* @author ruoyi
*/
public class ExcelUtil<T> {
private static final Logger log = LoggerFactory.getLogger(ExcelUtil.class);
/**
* Excel sheet最大行数,默认65536
*/
public static final int sheetSize = 65536;
/**
* 工作表名称
*/
private String sheetName;
/**
* 导出类型(EXPORT:导出数据;IMPORT:导入模板)
*/
private Type type;
/**
* 工作薄对象
*/
private Workbook wb;
/**
* 工作表对象
*/
private Sheet sheet;
/**
* 样式列表
*/
private Map<String, CellStyle> styles;
/**
* 导入导出数据列表
*/
private List<T> list;
/**
* 注解列表
*/
private List<Object[]> fields;
/**
* 实体对象
*/
public Class<T> clazz;
public ExcelUtil(Class<T> clazz) {
this.clazz = clazz;
}
public void init(List<T> list, String sheetName, Type type) {
if (list == null) {
list = new ArrayList<T>();
}
this.list = list;
this.sheetName = sheetName;
this.type = type;
createExcelField();
createWorkbook();
}
/**
* 对excel表单默认第一个索引名转换成list
*
* @param is 输入流
* @return 转换后集合
*/
public List<T> importExcel(InputStream is) throws Exception {
return imp