vxe-table 导入导出功能
一、准备工作（如图，左边为导入，右边为导出）
图片.png
1.首先将两个按钮打开
toolbarConfig: {
import: true,
export: true,
}
2.配置导入 导出属性
exportConfig: {
remote: true,
exportMethod: this.doExport,
types: ['xlsx', 'xls'],
modes: ['current', 'selected', 'all']
},
importConfig:{
remote: true,
importMethod: this.importMethod ,
types:['xlsx', 'xls'],
modes: ['insert']
},
二、方法属性：
导入方法：
// 自定义服务端导入
importMethod ({ file }) {
// 处理表单
const formBody = new FormData()
formBody.append('file', file)
// 上传文件
return usersApi.importExcel(formBody).then(rest => {
if (rest.status === 200) {
this.$refs.grid.commitProxy('query');
this.$message({
type: 'success',
message: '导入成功'
});
} else {
this.$message({
type: 'error',
message: '导入失败'
});
}
}).catch(() => {
this.$message({ content: '导入失败，请检查数据是否正确！', status: 'error' })
})
},
导出方法：
/*导出*/
doExport({options}) {
const {pager} = this.$refs.grid.getProxyInfo()
let params = {
columns: options.columns.reduce((arr, d) => {
arr.push(d.property);
return arr
}, []),
filename: options.filename,
mode: options.mode,
sheetName: options.sheetName,
type: options.type,
selectRecords: this.selectRecords,
currentPage: pager.currentPage,
pageSize: pager.pageSize,
total: pager.total,
form: this.formTemp,
}
params.form.dispatchMenu = 'user'
usersApi.doExport(params).then(res => {
//new Blob([res])中不加data就会返回下图中[object object]内容（少取一层）
let blob = new Blob([Object.prototype.toString.call(res.data).toLowerCase() === '[object object]' ? JSON.stringify(res.data) : res.data]);
let eLink = document.createElement('a');
eLink.download = options.filename + '.' + options.type
eLink.style.display = 'none';
eLink.href = URL.createObjectURL(blob);
document.body.appendChild(eLink);
eLink.click();
// 释放URL 对象
URL.revokeObjectURL(eLink.href);
document.body.removeChild(eLink);
})
},
三、userApi
对接后台的Api
import {downloadService} from '@/utils/request';
/**
* 导出
* @param data
*/
export function doExport(data) {
return downloadService({
url: '/user/doExport',
method: 'post',
data,
responseType: 'blob'
})
}
/**
* 导入
* @param data
*/
export function importExcel(data) {
return downloadService({
url: '/user/inportExcel',
method: 'post',
data,
responseType: 'blob'
})
}
四、后台数据解析
@PostMapping("/doExport")
@ApiOperation("导出")
public void export(@RequestBody ExportEntity<User> entity, HttpServletResponse response) {
try {
userService.doExport(entity, response);
} catch (IOException e) {
e.printStackTrace();
}
}
@PostMapping("/inportExcel")
@ApiOperation("导入")
public Object importExcel(MultipartFile file) throws Exception {
List<UserExport> dataList = EasyExcel.read(file.getInputStream()).head(UserExport.class).sheet().doReadSync();
userService.importData(dataList);
return ResultEntity.success("导入成功！");
}
User实体类代码就不给大家贴了，就是正常字段
UserExport 是我专门为导出的表做的实体类；解释一下这个注解：
@ExcelProperty这个注解是对应的导出的表头，里面的value值就是列名
这里注意一个问题，userName以及下面的字段名要和前台代码的field的字段属性一致，否则会导致导出的字段名称不对应而为空。
@Data
public class UserExport {
@ExcelProperty(value = "用户名")
private String userName;
@ExcelProperty(value = "所属部门")
private String deptName;
@ExcelProperty(value = "年龄")
private String age;
@ExcelProperty(value = "地址")
private String address;
@ExcelProperty(value = "联系方式")
private String tel;
}
导入是在service层解析数据批量插入表中即可
导出：根据不同的导出模式查询不同的数据集返回
switch (entity.getMode()) {
case "current":
data = queryCurrentData(entity);//当前页
break;
case "selected":
data = querySelectedData(entity);//已选择的数据
break;
case "all":
data = queryAllData(entity);//所有的数据
break;
default:
throw new BourbonException("不存在该数据导出方式");
}
ExportEntity<UserExport> exportEntity = new ExportEntity<>();
BeanUtil.copyProperties(entity, exportEntity);
exportEntity.setData(data);
ExportUtil.doExportExcel(response, exportEntity, UserExport.class);
}
五、功能实现
图片.png
图片.png
结论：不知道大家是否看到我在这里使用的是EasyExcel去读取文件信息,
他是阿里的一款工具类，功能十分强大
import com.alibaba.excel.EasyExcel;
依赖
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>2.2.2</version>
</dependency>s
咱们后端程序员应该会遇到读取 Excel 信息到 DB 等相关需求，脑海中可能突然间想起 Apache POI 这个技术解决方案，但是当 Excel 的数据量非常大的时候，你也许发现，POI 是将整个 Excel 的内容全部读出来放入到内存中，所以内存消耗非常严重，如果同时进行包含大数据量的 Excel 读操作，很容易造成内存溢出问题
但 EasyExcel 的出现很好的解决了 POI 相关问题，原本一个 3M 的 Excel 用 POI 需要100M左右内存, 而 EasyExcel 可以将其降低到几 M，同时再大的 Excel 都不会出现内存溢出的情况，因为是逐行读取 Excel 的内容
