EasyUI导出Excel实用指南

一、概述

在企业级Web应用中，数据导出为Excel是常见需求。EasyUI作为轻量级UI框架，其DataGrid组件提供了丰富的表格操作功能。本文将介绍两种主流导出方案：前端直接导出与后端生成文件，并提供具体实现代码。

二、方案一：前端导出（基于SheetJS）

适用于数据量较小的场景，无需与服务器交互。利用 XLSX 库将DataGrid数据转换为.xlsx文件。

2.1 引入SheetJS库

<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>

2.2 获取DataGrid数据

var rows = $('#dg').datagrid('getRows');

2.3 数据格式化与导出

function exportExcel() {
    var rows = $('#dg').datagrid('getRows');
    var ws = XLSX.utils.json_to_sheet(rows);
    var wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    XLSX.writeFile(wb, 'export.xlsx');
}

三、方案二：后端生成（Java POI）

适用于大数据量或需要复杂格式的场景。前端传递查询条件参数，后端生成Excel后以流形式返回。

3.1 前端请求

function exportExcel() {
    $('#dg').datagrid('loading');
    $.post('/export', {params: '...'}, function(url) {
        window.location.href = url;
        $('#dg').datagrid('loaded');
    });
}

3.2 后端Controller示例

@RequestMapping("/export")
public void export(HttpServletResponse response) {
    List<User> list = service.findUsers();
    HSSFWorkbook workbook = new HSSFWorkbook();
    HSSFSheet sheet = workbook.createSheet();
    // 填充数据...
    response.setContentType("application/vnd.ms-excel");
    response.setHeader("Content-Disposition", "attachment;filename=users.xls");
    workbook.write(response.getOutputStream());
    workbook.close();
}

四、注意事项

• 编码问题：设置响应头时注意字符编码，避免中文乱码。
• 大数据量性能：后端导出推荐使用流式处理，避免内存溢出。
• 列映射：若DataGrid列字段与实体属性不一致，需手动映射。

五、总结

前端导出适合简单场景，快速便捷；后端导出更灵活强大，适合复杂业务。开发者可根据项目需求选择合适方案。本文代码仅作演示，实际生产环境需完善异常处理及安全校验。