本章节重点介绍每个列表按钮栏都有一个导出功能,今天分析一下这个导出的实现逻辑
1、界面操作
第一步:点击右侧菜单栏的角色管理,系统展示角色列表,找到顶部的导出按钮,然后点击。
第二步:系统自动下载并保存本地目录
第三步:打开下载文件
2、代码实现
第一、导出按钮代码
<el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:role:export']" >导出</el-button> </el-col>
type:按钮类型。
icon:按钮前面的图标。
size:大小,mini是最小。
@click:点击事件,绑定处理函数handleExport。
v-hasPermi:是否拥有权限,权限字符串是system:role:export。
第二、导出按钮操作
/** 导出按钮操作 */
handleExport() { this.download('system/role/export', {
...this.queryParams
}, `role_${new Date().getTime()}.xlsx`)
}导出按钮的处理函数调用download的函数,download的函数是通过main配置统一的全局函数。
如上图,先import down,在做全局挂载Vue.prototype.download = download
第三、通用下载封装
// 通用下载方法
export function download(url, params, filename, config) {
downloadLoadingInstance = Loading.service({ text: "正在下载数据,请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
return service.post(url, params, {
transformRequest: [(params) => { return tansParams(params) }],
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
responseType: 'blob',
...config
}).then(async (data) => {
const isBlob = blobValidate(data);
if (isBlob) {
const blob = new Blob([data])
saveAs(blob, filename)
} else {
const resText = await data.text();
const rspObj = JSON.parse(resText);
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
Message.error(errMsg);
}
downloadLoadingInstance.close();
}).catch((r) => {
console.error(r)
Message.error('下载文件出现错误,请联系管理员!')
downloadLoadingInstance.close();
})
}如上述代码,是统一下载封装。
downloadLoadingInstance = Loading.service({ text: "正在下载数据,请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
该代码实现遮罩层的功能,提示用户正在下载。
service.post:该代码实现通过http post请求后端接口,获取下载文件。
3、后端接口代码实现
第一、代码路径如下图:
第二、具体接口入口代码
@Log(title = "角色管理", businessType = BusinessType.EXPORT)
@PreAuthorize("@ss.hasPermi('system:role:export')")
@PostMapping("/export")public void export(HttpServletResponse response, SysRole role){
List<SysRole> list = roleService.selectRoleList(role);
ExcelUtil<SysRole> util = new ExcelUtil<SysRole>(SysRole.class);
util.exportExcel(response, list, "角色数据");
}上述是导出代码,其中生成execl文档使用的是使用第三方jar poi-ooxml,poi-ooxml对excel处理的框架,处理excel2007版本以上的文档,是poi的升级版本,处理的单页数据量也是百万级别的。
maven中的pom文件里面引入。
<!-- excel工具 --> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> </dependency>
execl的实现逻辑是在实体对象增加@Excel注解
例如上述代码ExcelUtil<SysRole> util = new ExcelUtil<SysRole>(SysRole.class);该代码是需要生成SysRole类对象的execl文件,我们可以看看SysRole代码的@Excel配置
private static final long serialVersionUID = 1L;/** 角色ID */ @Excel(name = "角色序号", cellType = ColumnType.NUMERIC) private Long roleId;/** 角色名称 */@Excel(name = "角色名称") private String roleName;/** 角色权限 */ @Excel(name = "角色权限")private String roleKey;/** 角色排序 */ @Excel(name = "角色排序")private Integer roleSort;
其中name是对应execl的头部标题,List<SysRole> list =
roleService.selectRoleList(role); 这个sql查询出来的就是对应的数据。详细参见下图已经下载的execl文件
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表