在现代医疗信息系统中,数据导出是医护人员和行政人员日常工作中的重要需求。本文将详细介绍如何使用ExcelJS库在前端实现专业级的医疗数据导出功能,特别是针对住院缴费记录这类关键业务数据。
功能概述
这个exportExcel
函数实现了以下核心功能:
将医疗缴费记录转换为结构化的Excel报表
自动生成美观的表头样式
智能处理数据格式和特殊值
优化列宽和表格布局
支持中文表头和符合医疗行业规范的展示方式
自动生成带时间戳的文件名
技术实现解析
1. 数据预处理
const processedData = deriveArr.map(item => ({
"用户昵称": !item.user ? '未知' : item.user.nickname,
"就诊卡号": item.card,
"手机号": !item.user ? '未知' : item.user.tel,
// 其他字段处理...
"支付金额": parseFloat(item.money), // 金额转为数字
"住院状态": item.report_status == 1 ? '住院中' : '已出院' // 状态码转文字
}));
关键点:
使用
map
进行数据转换,保持原始数据不变处理可能的空值情况(如
!item.user ? '未知'
)将状态码转换为易读的文字描述
数值类型明确转换(
parseFloat
)
2. 表格样式配置
// 表头样式
worksheet.getRow(1).eachCell((cell) => {
cell.font = { bold: true }; // 加粗
cell.alignment = { vertical: 'middle', horizontal: 'center' };
cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFD3D3D3' } };
cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };
});
// 数据行样式
row.eachCell((cell) => {
cell.alignment = { vertical: 'middle', horizontal: 'center' };
cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };
});
样式亮点:
表头灰色背景与数据行区分
统一的边框样式增强可读性
内容垂直水平居中,专业美观
细边框(thin)保证打印效果
3. 表格布局优化
// 设置列宽
worksheet.columns = [
{ header: "患者姓名", key: "nickname", width: 15 },
{ header: "就诊卡号", key: "card", width: 12 },
// 其他列配置...
{ header: "订单号", key: "order_code", width: 18 }
];
// 冻结表头
worksheet.views = [
{ state: 'frozen', ySplit: 1 } // 冻结第一行
];
布局技巧:
根据内容类型设置不同列宽(如较长订单号设18字符)
冻结表头方便浏览长数据
使用中文表头符合医疗系统使用习惯
4. 文件导出实现
const buffer = await workbook.xlsx.writeBuffer();
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const fileName = `门诊缴费记录_${timestampToDateTime(timestamp)}.xlsx`;
saveAs(blob, fileName);
导出流程:
生成Excel二进制数据
创建Blob对象
使用FileSaver.js的saveAs方法触发下载
文件名包含导出时间便于归档
时间格式化工具
function timestampToDateTime(timestamp, isMillisecond = true) {
if (!isMillisecond) timestamp *= 1000;
const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
// 其他时间部分...
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
特点:
自动处理秒级/毫秒级时间戳
各时间部分自动补零
返回标准化的日期时间格式
扩展应用场景
这个导出方案可轻松适配其他医疗数据场景:
门诊记录导出:
const worksheet = workbook.addWorksheet('门诊记录'); // 调整字段映射...
药品库存报表:
worksheet.columns = [ { header: "药品名称", width: 20 }, { header: "规格", width: 10 }, { header: "库存量", width: 8 } ];
检验报告汇总:
// 添加条件格式 worksheet.addConditionalFormatting({ // 异常值高亮... });
性能优化建议
大数据量分片:
if (processedData.length > 10000) { // 分多个工作表... }
进度反馈:
const progress = Math.round((index / total) * 100); updateProgress(progress);
Web Worker支持:
// 在Worker线程中执行导出逻辑
总结
这个实现方案展示了如何:
使用ExcelJS创建专业级Excel报表
处理医疗行业特有的数据展示需求
实现用户友好的交互体验
保证导出功能的性能和可靠性
通过合理的代码组织和配置化设计,该方案可以轻松扩展以适应各种医疗数据导出场景,为医疗信息化系统提供强大的数据导出能力。