EXT Grid实现Excel导出功能详解

本文还有配套的精品资源，点击获取

简介：EXT Grid是一款基于JavaScript的数据网格组件，广泛应用于Web系统中展示和管理结构化数据。本文详细讲解如何在EXT Grid中实现将数据显示导出到Excel的功能，核心依赖浏览器Blob对象和FileSaver.js库，并结合SheetJS处理Excel文件的生成与保存。通过完整流程解析，帮助开发者掌握EXT Grid导出Excel的实现方法与注意事项。

1. EXT Grid导出Excel的背景与技术概述

在现代Web应用中，数据展示与导出功能已成为不可或缺的一部分。EXT Grid作为Ext JS框架中的核心组件，广泛用于构建企业级数据表格，具备强大的数据绑定、排序、筛选和分页能力。然而，用户往往不仅希望在界面上查看数据，还希望将这些数据导出为Excel格式，以便进行更深入的分析或报表制作。

为实现EXT Grid数据导出至Excel的功能，需借助前端技术栈中的一些关键库，如Blob对象用于处理二进制数据流，FileSaver.js用于触发浏览器端文件下载，以及SheetJS（js-xlsx）用于Excel文件的生成与格式控制。这些技术共同构成了导出功能的技术基础，为后续章节的实践打下坚实基础。

2. EXT Grid组件与数据源（Store）解析

在现代Web应用中，数据展示与交互是核心功能之一。EXT Grid作为Ext JS框架中的核心组件之一，以其强大的数据绑定能力、灵活的列配置、高效的渲染机制，成为前端开发中不可或缺的表格展示工具。而Grid组件背后的数据源（Store）则承担着数据的加载、缓存、过滤、排序等职责。本章将深入解析EXT Grid组件的结构与核心属性，探讨Store对象的构成与数据获取方式，并详细分析如何从数据源中提取字段信息并进行处理，为后续导出Excel的功能实现奠定基础。

2.1 EXT Grid组件结构与核心属性

EXT Grid组件是Ext JS框架中用于展示表格数据的核心控件，其结构清晰、模块化设计良好，能够灵活适应各种复杂的数据展示场景。

2.1.1 Grid组件的视图结构与渲染机制

EXT Grid的视图结构由多个子组件组成，主要包括：

• HeaderContainer ：负责渲染表头部分，支持排序、列宽调整、隐藏/显示列等功能。
• View ：数据内容的展示区域，负责将Store中的数据逐行渲染为表格行。
• SelectionModel ：管理用户的选择行为，如单选、多选、行高亮等。
• Scroller ：负责滚动行为的控制，特别是在处理大数据量时，实现虚拟滚动机制以提升性能。

渲染机制方面，EXT Grid采用“虚拟滚动”技术（Virtual Scrolling），只渲染可视区域内的数据行，其余行通过滚动事件动态加载。这种方式极大地提升了性能，尤其适用于成千上万条数据的展示。

以下是一个简单的Grid定义示例：

Ext.create('Ext.grid.Panel', {
    title: '用户列表',
    store: userStore,
    columns: [
        { text: '姓名', dataIndex: 'name', width: 150 },
        { text: '年龄', dataIndex: 'age', width: 80 },
        { text: '邮箱', dataIndex: 'email', flex: 1 }
    ],
    height: 300,
    width: 600,
    renderTo: Ext.getBody()
});

代码逻辑分析：

• store: userStore ：将Grid与一个名为 userStore 的数据源绑定。
• columns ：定义列配置，每个列对象包含 text （显示标题）、 dataIndex （对应Store字段）和宽度/弹性配置。
• height 、 width ：设置Grid容器的大小。
• renderTo ：指定渲染到页面的哪个位置，这里是 Ext.getBody() ，即页面主体区域。

2.1.2 列配置与数据绑定方式

EXT Grid的列配置不仅支持基础的文本显示，还可以嵌入组件（如ComboBox、CheckBox、ActionColumn等），增强交互能力。

示例：使用ActionColumn添加操作按钮

{
    xtype: 'actioncolumn',
    width: 50,
    items: [
        {
            iconCls: 'x-fa fa-edit',
            tooltip: '编辑',
            handler: function(grid, rowIndex, colIndex) {
                var rec = grid.getStore().getAt(rowIndex);
                console.log('编辑记录：', rec.getData());
            }
        },
        {
            iconCls: 'x-fa fa-trash',
            tooltip: '删除',
            handler: function(grid, rowIndex, colIndex) {
                var rec = grid.getStore().getAt(rowIndex);
                grid.getStore().remove(rec);
            }
        }
    ]
}

参数说明：

• xtype: 'actioncolumn' ：定义列类型为操作列。
• iconCls ：使用Font Awesome图标。
• handler ：定义点击操作时的回调函数，参数 grid 表示当前Grid对象， rowIndex 为行索引， colIndex 为列索引。
• grid.getStore().getAt(rowIndex) ：根据行索引获取当前行的记录对象。

表格：列配置类型与功能说明

列类型	描述	常用配置项
TextColumn	文本展示，支持排序、过滤等基本功能	dataIndex、text、width
NumberColumn	数值类型列，支持格式化显示	format、align
DateColumn	日期类型列，可自定义日期格式	format
BooleanColumn	布尔值列，自动渲染为图标或文字	trueText、falseText
ActionColumn	操作列，嵌入图标按钮，执行自定义操作	items、handler

2.2 Store对象的构成与数据获取

EXT Grid的数据源通常由一个 Ext.data.Store 对象提供。Store不仅负责数据的加载与缓存，还支持排序、分页、过滤等高级功能。

2.2.1 Store的数据模型（Model）定义

Store的数据模型通过 Ext.data.Model 定义，用于描述数据字段的结构与类型。

示例：定义User数据模型

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' },
        { name: 'age', type: 'int' },
        { name: 'email', type: 'string' },
        { name: 'created_at', type: 'date', dateFormat: 'Y-m-d' }
    ]
});

参数说明：

• name ：字段名称，对应后端返回的字段名。
• type ：字段类型，支持 string 、 int 、 float 、 boolean 、 date 等。
• dateFormat ：当字段为日期类型时，指定解析格式。

2.2.2 Store的加载与刷新机制

Store的加载机制支持本地静态数据加载和远程异步加载两种方式。

示例：远程加载数据

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
        type: 'ajax',
        url: '/api/users',
        reader: {
            type: 'json',
            rootProperty: 'data'
        }
    },
    autoLoad: true
});

参数说明：

• proxy.type: 'ajax' ：使用Ajax请求加载数据。
• url ：数据接口地址。
• reader ：定义如何解析响应数据。
• rootProperty ：指定JSON响应中数据所在的字段名。
• autoLoad: true ：创建Store时自动加载数据。

刷新数据的方法：

userStore.load();

该方法会重新发送请求获取最新数据，常用于页面刷新或数据更新后同步Grid显示。

2.2.3 获取Grid绑定的Store数据记录

在实际开发中，经常需要从Grid中获取当前显示的数据记录。可以通过以下方式获取：

示例：获取Grid当前页的所有记录

var grid = Ext.getCmp('userGrid');
var store = grid.getStore();
var records = store.getRange(); // 获取当前页所有记录

records.forEach(function(record) {
    console.log(record.getData());
});

参数说明：

• store.getRange() ：返回当前页面加载的所有记录。
• record.getData() ：获取记录对象中的原始数据。

流程图：Grid与Store交互流程

graph TD
    A[Grid组件] --> B[绑定Store]
    B --> C[Store加载数据]
    C --> D[发起Ajax请求]
    D --> E[服务器返回JSON数据]
    E --> F[Store解析数据]
    F --> G[Grid渲染视图]
    G --> H[用户交互]
    H --> I[Store更新数据]
    I --> J[Grid自动刷新]

2.3 数据源中字段信息的提取与处理

为了后续导出Excel文件，需要从数据源中提取字段信息，并进行必要的数据处理。

2.3.1 字段名称与数据类型的获取

EXT Grid的列配置与Store模型中都定义了字段信息。可以通过以下方式获取字段名称和类型：

var columns = grid.getColumns();
columns.forEach(function(column) {
    console.log('字段名:', column.dataIndex, '类型:', column.fieldType);
});

参数说明：

• column.dataIndex ：列绑定的数据字段名。
• column.fieldType ：字段类型（如string、int等）。

2.3.2 数据记录的遍历与筛选

在处理大数据时，往往需要对记录进行筛选或分页处理。

示例：筛选年龄大于30的用户

var filteredRecords = store.queryBy(function(record) {
    return record.get('age') > 30;
}).getRange();

console.log('筛选结果：', filteredRecords);

参数说明：

• store.queryBy ：按条件筛选记录。
• record.get('age') ：获取当前记录的 age 字段值。

2.3.3 数据结构的初步转换与预处理

导出Excel前，需要将数据转换为二维数组格式。以下是一个示例：

var headers = ['姓名', '年龄', '邮箱'];
var data = records.map(function(record) {
    return [
        record.get('name'),
        record.get('age'),
        record.get('email')
    ];
});

var excelData = [headers].concat(data);
console.log(excelData);

参数说明：

• headers ：定义Excel表头。
• map ：将每条记录转换为数组。
• concat ：将表头与数据合并为二维数组，适配SheetJS格式要求。

表格：字段处理与Excel格式对应关系

EXT Grid字段类型	Excel导出类型	处理方式说明
string	文本	直接导出字符串
int/float	数值	转换为Number类型
date	日期	格式化为YYYY-MM-DD或Excel日期
boolean	布尔值	显示为”是”/”否”或1/0

本章从EXT Grid组件的结构与核心属性入手，深入剖析了Grid的视图组成、列配置方式，接着详细讲解了Store的构成与数据获取机制，并演示了如何从数据源中提取字段信息并进行预处理。这些内容为后续章节中将Grid数据导出为Excel格式提供了坚实的技术基础。

3. 导出Excel所需前端库的使用方法

在Web应用中，将数据导出为Excel格式已经成为一种常见的需求。为了实现这一功能，前端开发者通常会借助一些开源库来简化开发流程并提升兼容性。其中，Blob对象用于处理二进制数据，FileSaver.js负责将数据保存为文件并触发浏览器下载，而SheetJS（js-xlsx）则提供了将数据结构化为Excel表格的能力。本章将详细介绍这些库的基本使用方法、核心API以及它们在数据导出流程中的作用。

3.1 Blob对象的基本概念与作用

Blob（Binary Large Object）对象表示不可变的、原始数据的类文件对象。它常用于处理图像、音频、视频、Excel文件等二进制数据。Blob对象在前端导出Excel文件时，主要用于将SheetJS生成的Excel二进制数据包装为可下载的文件。

3.1.1 Blob对象的构造与类型设置

Blob对象通过构造函数创建，其基本语法如下：

new Blob(array, options);

• array ：一个数组，可以包含ArrayBuffer、ArrayBufferView、Blob、String等类型的数据。
• options ：可选对象，用于指定MIME类型和是否结束行。

例如，创建一个包含字符串的Blob对象：

const blob = new Blob(["Hello, world!"], { type: "text/plain" });

在导出Excel文件时，我们需要设置MIME类型为Excel支持的格式，如 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet 。

3.1.2 Blob对象在文件生成中的应用

在将SheetJS生成的Excel二进制数据转换为可下载的 .xlsx 文件时，我们通常会使用Blob对象进行封装。例如：

const wb = XLSX.utils.table_to_book(document.getElementById("myTable"));
const wbout = XLSX.write(wb, { bookType: "xlsx", type: "array" });
const blob = new Blob([wbout], { type: "application/octet-stream" });

上述代码中，我们首先使用SheetJS将HTML表格转换为Excel工作簿对象，然后将其写入为二进制数组，最后通过Blob对象进行封装。这样，Blob对象就成为后续保存和下载Excel文件的基础。

3.2 FileSaver.js库的引入与调用

FileSaver.js 是一个轻量级的库，用于在浏览器中保存文件。它封装了Blob对象，并提供了一个简单的方法 saveAs() ，可以跨浏览器地触发文件下载。

3.2.1 saveAs方法的使用方式

FileSaver.js 的核心API是 saveAs(blob, filename) ，其参数说明如下：

参数	类型	说明
blob	Blob	要保存的文件内容
filename	String	保存的文件名（带扩展名）

使用示例：

saveAs(blob, "export.xlsx");

结合前一节生成的Blob对象，我们可以实现完整的Excel文件下载功能：

const wb = XLSX.utils.table_to_book(document.getElementById("myTable"));
const wbout = XLSX.write(wb, { bookType: "xlsx", type: "array" });
const blob = new Blob([wbout], { type: "application/octet-stream" });

saveAs(blob, "export.xlsx");

3.2.2 文件保存格式与浏览器兼容性处理

FileSaver.js 在大多数现代浏览器中都能正常工作，包括Chrome、Firefox、Edge和Safari。然而，在IE10及以下版本中可能存在兼容性问题，需要引入 Blob.js polyfill 来支持Blob对象。

此外，当使用 application/octet-stream 作为MIME类型时，某些浏览器可能会提示“未知文件类型”，但文件仍然可以正常下载和打开。为了更准确地标识Excel文件，可以使用更标准的MIME类型：

const blob = new Blob([wbout], {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
});

3.3 SheetJS（js-xlsx）库的功能解析

SheetJS 是一个强大的JavaScript库，专门用于处理Excel文件。它支持多种Excel格式（如 .xls 、 .xlsx ），并提供了丰富的API用于读写Excel数据。

3.3.1 工作簿与工作表的基本操作

SheetJS中的核心概念是“工作簿”（Workbook）和“工作表”（Worksheet）。一个工作簿可以包含多个工作表。

创建工作簿与工作表

可以使用 XLSX.utils.aoa_to_sheet() 方法将二维数组转换为工作表对象：

const ws = XLSX.utils.aoa_to_sheet([
    ["姓名", "年龄", "城市"],
    ["张三", 28, "北京"],
    ["李四", 32, "上海"]
]);

然后，使用 XLSX.utils.book_new() 创建一个空工作簿，并通过 XLSX.utils.book_append_sheet() 将工作表添加进去：

const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

工作簿结构流程图

graph TD
    A[Workbook] --> B[Sheet1]
    A --> C[Sheet2]
    A --> D[Sheet3]
    B --> E[Cell A1]
    B --> F[Cell B2]
    C --> G[Cell A1]
    D --> H[Cell B2]

3.3.2 数据写入与格式控制方法

SheetJS允许我们控制Excel中的数据格式，例如设置单元格的样式、合并单元格等。

数据写入方式

SheetJS支持多种数据结构转换为Excel表格，如：

• aoa_to_sheet ：二维数组
• json_to_sheet ：JSON数组
• table_to_sheet ：HTML表格

例如，将JSON数组写入工作表：

const data = [
    { name: "张三", age: 28, city: "北京" },
    { name: "李四", age: 32, city: "上海" }
];
const ws = XLSX.utils.json_to_sheet(data);

格式控制（合并单元格）

虽然SheetJS默认不支持样式设置，但可以通过操作工作表的 !merges 属性实现合并单元格：

ws["!merges"] = [
    { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } } // 合并第一行前三列
];

3.3.3 支持的Excel格式与兼容性说明

SheetJS支持以下Excel格式：

格式	说明
.xlsx	Office Open XML 格式，推荐使用
.xls	Excel 97-2003 格式，兼容性较好
.ods	OpenDocument 电子表格
.csv	逗号分隔值文件

在浏览器兼容性方面，SheetJS支持所有主流浏览器，包括IE11（需引入polyfill）。对于 .xlsx 格式，SheetJS使用Web Worker进行处理，以避免阻塞主线程，提升性能。

SheetJS导出流程图

graph TD
    A[数据源] --> B{数据结构}
    B -->|二维数组| C[XLSX.utils.aoa_to_sheet]
    B -->|JSON| D[XLSX.utils.json_to_sheet]
    B -->|HTML表格| E[XLSX.utils.table_to_sheet]
    C --> F[工作表]
    D --> F
    E --> F
    F --> G[创建工作簿]
    G --> H[添加工作表]
    H --> I[写入Excel文件]
    I --> J[转换为Blob]
    J --> K[使用FileSaver.js下载]

SheetJS写入Excel代码逻辑分析

以下是一个完整的SheetJS导出Excel的代码示例：

// 准备数据（二维数组）
const data = [
    ["姓名", "年龄", "城市"],
    ["张三", 28, "北京"],
    ["李四", 32, "上海"]
];

// 转换为工作表
const ws = XLSX.utils.aoa_to_sheet(data);

// 创建工作簿并添加工作表
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "用户信息");

// 写出为Excel文件（二进制数组）
const wbout = XLSX.write(wb, { bookType: "xlsx", type: "array" });

// 创建Blob对象
const blob = new Blob([wbout], {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
});

// 使用FileSaver.js下载
saveAs(blob, "用户信息.xlsx");

• 第1~3行 ：定义数据源，使用二维数组表示表头和数据行。
• 第6~8行 ：将数据转换为工作表对象。
• 第11~12行 ：创建工作簿并添加工作表。
• 第15行 ：将工作簿写入为二进制数组。
• 第18~21行 ：将数据封装为Blob对象，并设置正确的MIME类型。
• 第24行 ：使用FileSaver.js的 saveAs 方法触发浏览器下载。

以上代码展示了如何使用SheetJS将数据写入Excel文件，并结合Blob和FileSaver.js实现完整的导出与下载流程。这一流程在现代Web应用中非常常见，尤其适用于从Ext JS Grid中导出数据的场景。

4. 从EXT Grid提取数据并转换为Excel可用格式

在Web应用中，将EXT Grid中的数据导出为Excel文件是常见的业务需求。本章将详细讲解如何从EXT Grid组件中提取数据，并将其转换为Excel文件可识别的格式。我们将围绕数据获取、字段映射和结构化转换三个核心步骤展开，确保数据在导出时保持完整性和可读性。

4.1 获取Grid数据源中的全部记录

EXT Grid 的数据展示依赖于 Ext.data.Store，而 Store 可以通过本地或远程加载数据。为了导出完整的数据，需要获取 Store 中的所有记录。

4.1.1 遍历Store获取数据数组

Ext JS 提供了 store.getData() 和 store.getRange() 方法来获取 Store 中的数据记录。以下是一个典型的遍历 Store 获取数据的代码示例：

var store = grid.getStore();
var records = store.getRange(); // 获取当前页所有记录

var dataArray = records.map(function(record) {
    return record.getData(); // 获取每条记录的原始数据对象
});

逐行解析：
- 第 1 行：通过 grid.getStore() 获取 Grid 绑定的 Store。
- 第 2 行： store.getRange() 返回当前 Store 中所有已加载的数据记录（适用于本地分页）。
- 第 4~6 行：使用 map 方法遍历每条记录，并调用 record.getData() 将其转换为原始 JavaScript 对象数组。

该方式适用于本地分页场景，但如果数据是远程分页加载的，仅靠 getRange() 无法获取全部数据。

4.1.2 处理分页与远程加载的数据源

当 Grid 使用远程分页时，Store 仅加载当前页的数据，因此需要额外处理以获取所有数据。

var store = grid.getStore();
var allRecords = [];

function fetchAllRecords(start) {
    store.loadPage(start, {
        callback: function(records, operation, success) {
            if (success) {
                allRecords = allRecords.concat(records);
                var total = store.getTotalCount();
                var pageSize = store.getPageSize();
                if (start * pageSize < total) {
                    fetchAllRecords(start + 1);
                } else {
                    // 所有数据加载完成
                    var fullData = allRecords.map(function(record) {
                        return record.getData();
                    });
                    console.log(fullData);
                }
            }
        }
    });
}

fetchAllRecords(1); // 从第一页开始加载

逐行解析：
- 第 1~2 行：定义变量 store 和 allRecords 用于存储所有记录。
- 第 4 行：定义递归函数 fetchAllRecords(start) ，用于分页加载。
- 第 5 行：调用 store.loadPage(start) 加载第 start 页的数据。
- 第 6~14 行：在回调函数中拼接所有页的数据，直到加载完成。
- 第 15 行：开始从第一页加载。

参数说明：
- start : 当前加载的页码。
- pageSize : 每页记录数，由 Store 配置决定。
- total : 总记录数，由 Store 的 getTotalCount() 获取。

这种方式适用于远程分页场景，确保导出时数据完整。

4.2 数据字段与表头的映射关系

导出 Excel 文件时，通常需要将表头（Grid 列名）与数据字段进行映射。这有助于用户理解导出数据的含义。

4.2.1 表头文本的提取与排序

Grid 的列配置通过 columns 属性定义，可以从中提取表头文本：

var columns = grid.getColumns();
var headers = columns
    .filter(function(col) {
        return !col.getHidden(); // 排除隐藏列
    })
    .map(function(col) {
        return col.getText(); // 获取列标题
    });

逐行解析：
- 第 1 行：获取 Grid 的所有列配置。
- 第 2 行：过滤隐藏列，只保留可见列。
- 第 3~5 行：提取每列的标题文本。

4.2.2 字段别名与自定义显示名的处理

有些列可能绑定了数据字段的别名，或通过 renderer 自定义显示内容。此时，需要建立字段与列标题的映射关系：

var fieldToHeaderMap = columns.reduce(function(map, col) {
    var dataIndex = col.getDataIndex();
    if (dataIndex && !col.getHidden()) {
        map[dataIndex] = col.getText();
    }
    return map;
}, {});

逐行解析：
- 第 1 行：使用 reduce 构建字段与表头的映射字典。
- 第 2 行：获取列对应的数据字段名。
- 第 3 行：如果字段存在且列未隐藏，则加入映射字典。

参数说明：
- dataIndex : 列绑定的数据字段名。
- col.getText() : 列的显示标题。

字段映射示例表格：

数据字段名	表头显示名
name	姓名
age	年龄
birthDate	出生日期

4.3 数据格式转换为二维数组

为了适配 SheetJS 的 Excel 写入接口（如 XLSX.utils.aoa_to_sheet() ），需要将数据转换为二维数组形式。

4.3.1 原始数据的结构化整理

将原始数据对象数组转换为二维数组：

var rows = dataArray.map(function(data) {
    return headers.map(function(header) {
        var field = Object.keys(fieldToHeaderMap).find(
            key => fieldToHeaderMap[key] === header
        );
        return data[field];
    });
});

逐行解析：
- 第 1 行：对每条数据记录进行映射。
- 第 2 行：按表头顺序提取对应字段的值。
- 第 3~5 行：根据字段映射字典查找对应的字段名。

4.3.2 日期、数字等特殊类型的数据处理

某些字段如日期或数字在导出时需要格式化，避免 Excel 显示为时间戳或错误格式。

function formatValue(value) {
    if (value instanceof Date) {
        return Ext.Date.format(value, 'Y-m-d'); // 格式化日期
    } else if (typeof value === 'number') {
        return value.toFixed(2); // 保留两位小数
    } else {
        return value;
    }
}

var formattedRows = rows.map(function(row) {
    return row.map(formatValue);
});

逐行解析：
- 第 1~7 行：定义 formatValue 函数，用于统一格式化数据。
- 第 9~11 行：对二维数组的每个值进行格式化处理。

参数说明：
- Ext.Date.format(value, 'Y-m-d') : Ext JS 提供的日期格式化方法。
- toFixed(2) : 保留两位小数，适用于金额、百分比等字段。

4.3.3 二维数组与SheetJS数据结构的适配

SheetJS 的 XLSX.utils.aoa_to_sheet() 接口接受二维数组作为输入，因此最终数据格式如下：

var worksheetData = [headers].concat(formattedRows); // 第一行是表头

参数说明：
- [headers] : 表头行。
- .concat(formattedRows) : 拼接所有数据行。

数据结构示例：

[
  ["姓名", "年龄", "出生日期"],
  ["张三", "28", "1995-03-12"],
  ["李四", "32", "1991-08-22"]
]

mermaid流程图说明数据转换流程：

graph TD
    A[Grid组件] --> B[获取Store]
    B --> C{是否远程分页}
    C -->|是| D[分页加载数据]
    C -->|否| E[一次性获取全部数据]
    D --> F[构建完整数据数组]
    E --> F
    F --> G[提取列配置]
    G --> H[构建字段与表头映射]
    H --> I[将数据对象转换为二维数组]
    I --> J[格式化日期、数字等字段]
    J --> K[适配SheetJS格式要求]

通过本章的讲解，我们系统地分析了从 EXT Grid 提取数据并转换为 Excel 可用格式的完整流程。包括：

• 获取 Store 数据，支持本地与远程分页；
• 提取列配置并构建字段与表头的映射；
• 将数据转换为二维数组，并对特殊字段进行格式化；
• 适配 SheetJS 的数据接口要求。

下一章我们将深入探讨如何使用 SheetJS 构建 Excel 工作簿与工作表，并将上述二维数组写入 Excel 文件中。

5. 使用SheetJS构建Excel文件并写入数据

SheetJS（js-xlsx）是一个功能强大的JavaScript库，广泛用于在前端处理Excel文件的创建、读取和修改。它提供了丰富的API来操作Excel工作簿和工作表，并支持多种Excel格式（如 .xls 、 .xlsx 等）。在本章中，我们将深入探讨如何使用SheetJS将EXT Grid中的数据构建成标准的Excel文件，并将数据写入到指定的工作表中。此外，我们还将介绍如何实现多个Grid数据合并导出为一个Excel文件，包括工作表的命名与管理，为后续的文件导出流程奠定基础。

5.1 创建Excel工作簿与工作表

在使用SheetJS构建Excel文件之前，首先需要了解如何创建一个Excel工作簿（Workbook）和工作表（Worksheet）。SheetJS提供了多种方式来生成工作表，其中最常用的是基于二维数组（Array of Arrays）的 XLSX.utils.aoa_to_sheet 方法。

5.1.1 使用XLSX.utils.aoa_to_sheet方法

XLSX.utils.aoa_to_sheet 方法可以将一个二维数组转换为SheetJS的Worksheet对象。这种方式适用于已经将EXT Grid数据转换为二维数组的情况，是将数据写入Excel的基础操作。

const data = [
    ['姓名', '年龄', '城市'],
    ['张三', 28, '北京'],
    ['李四', 34, '上海'],
    ['王五', 25, '广州']
];

const worksheet = XLSX.utils.aoa_to_sheet(data);

逐行解析：

• const data = [...] ：定义了一个二维数组，表示一个简单的表格数据，包含表头和数据行。
• XLSX.utils.aoa_to_sheet(data) ：将二维数组转换为SheetJS的worksheet对象，后续可以将其添加到工作簿中。

⚠️ 注意：该方法默认不会自动设置单元格格式（如文本对齐、数字格式等），需要在后续步骤中手动配置或通过其他方法进行样式处理。

5.1.2 定义工作表名称与行列范围

创建完工作表后，我们需要将其添加到工作簿中，并为工作表命名。SheetJS通过 XLSX.utils.book_new() 和 XLSX.utils.book_append_sheet() 方法来创建一个新的工作簿并添加工作表。

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, '用户信息');

逐行解析：

• XLSX.utils.book_new() ：创建一个新的Excel工作簿对象。
• XLSX.utils.book_append_sheet(workbook, worksheet, '用户信息') ：将之前创建的 worksheet 添加到 workbook 中，并命名为“用户信息”。

此外，SheetJS还支持对工作表的行列范围进行定义。例如，可以指定工作表的起始单元格和结束单元格：

worksheet['!ref'] = 'A1:C4';

参数说明：

• worksheet['!ref'] ：定义工作表的单元格范围，格式为“起始单元格:结束单元格”。
• 'A1:C4' ：表示从A1到C4的区域，对应4行3列。

💡 提示：如果不手动设置 !ref ，SheetJS会根据数据内容自动推断行列范围，但在某些情况下（如动态数据）建议手动设置以避免数据溢出。

流程图：创建工作簿与工作表的流程

graph TD
    A[定义二维数组] --> B[调用aoa_to_sheet生成工作表]
    B --> C[创建空工作簿]
    C --> D[将工作表添加到工作簿]
    D --> E[设置工作表名称]

5.2 将二维数组数据写入Excel结构

在实际应用中，EXT Grid中的数据通常需要从Store中提取，并经过处理后转换为二维数组。本节将详细介绍如何将这类数据写入Excel结构中，并探讨不同写入方法的性能差异。

5.2.1 数据写入方法的选择与性能优化

SheetJS提供了多种方法将数据写入Excel结构，除了 aoa_to_sheet 之外，还有：

• XLSX.utils.json_to_sheet() ：将JSON数组转换为工作表，适合处理具有字段名的对象数组。
• XLSX.utils.table_to_sheet() ：将HTML表格直接转换为工作表，适用于DOM结构的数据。

比较不同写入方式的性能

方法	适用场景	性能表现	灵活性
aoa_to_sheet	二维数组数据	快速	适合结构化数据
json_to_sheet	JSON对象数组	中等	支持字段映射
table_to_sheet	HTML表格元素	慢（需DOM解析）	不适合动态数据

⚠️ 建议：对于从EXT Grid中提取的结构化数据（如Store数据），推荐使用 aoa_to_sheet ，因为其性能最佳，且能更好地与EXT Grid的数据结构匹配。

5.2.2 插入表头与数据行的实现方式

在实际导出时，我们通常需要将表头（列名）和数据行分别处理。EXT Grid的列配置可以通过 grid.columns 获取，进而提取表头信息。

function getGridHeaders(grid) {
    return grid.columns.map(col => col.text);
}

function getGridData(store) {
    return store.data.items.map(record => {
        return Object.values(record.data);
    });
}

代码逻辑分析：

• getGridHeaders(grid) ：从Grid组件中提取列标题，用于生成Excel表头行。
• getGridData(store) ：从Store中提取每条记录的数据值，组成二维数组。

接下来将这两个部分合并，构建完整的Excel数据：

const headers = getGridHeaders(grid);
const records = getGridData(store);

const fullData = [headers, ...records];
const worksheet = XLSX.utils.aoa_to_sheet(fullData);

参数说明：

• [headers, ...records] ：将表头行与数据行合并为一个二维数组。
• worksheet ：最终的SheetJS工作表对象，可用于添加到工作簿。

流程图：构建完整Excel数据结构

graph TD
    A[提取Grid列头] --> B[提取Store数据]
    B --> C[合并表头与数据]
    C --> D[调用aoa_to_sheet生成工作表]

5.3 工作簿的合并与多Sheet处理

在某些业务场景下，可能需要将多个EXT Grid的数据导出到一个Excel文件中，每个Grid对应一个Sheet。SheetJS支持多Sheet管理，可以轻松实现多个工作表的合并。

5.3.1 多个Grid数据导出为一个Excel文件

假设我们有两个Grid组件 grid1 和 grid2 ，它们分别绑定不同的Store。我们希望将它们导出为一个Excel文件的两个Sheet。

function createSheetFromGrid(grid, store) {
    const headers = getGridHeaders(grid);
    const records = getGridData(store);
    const data = [headers, ...records];
    return XLSX.utils.aoa_to_sheet(data);
}

const workbook = XLSX.utils.book_new();

// 添加第一个Grid的工作表
const sheet1 = createSheetFromGrid(grid1, store1);
XLSX.utils.book_append_sheet(workbook, sheet1, '用户列表');

// 添加第二个Grid的工作表
const sheet2 = createSheetFromGrid(grid2, store2);
XLSX.utils.book_append_sheet(workbook, sheet2, '订单信息');

代码逻辑分析：

• createSheetFromGrid(grid, store) ：封装了从Grid和Store生成工作表的逻辑。
• XLSX.utils.book_append_sheet(...) ：将两个工作表分别添加到同一个工作簿中，Sheet名称分别为“用户列表”和“订单信息”。

5.3.2 Sheet名称的自定义与管理

Sheet名称在Excel中不能重复，也不能包含非法字符（如 * , ? , : 等）。因此在导出前需要对Sheet名称进行合法性校验和自定义处理。

function sanitizeSheetName(name) {
    return name.replace(/[\\\/\*\[\]\:]/g, '_');
}

function addSheetToWorkbook(workbook, worksheet, name) {
    const safeName = sanitizeSheetName(name);
    XLSX.utils.book_append_sheet(workbook, worksheet, safeName);
}

参数说明：

• sanitizeSheetName(name) ：移除Sheet名称中的非法字符，避免Excel报错。
• addSheetToWorkbook(...) ：安全地将工作表添加到工作簿中，支持Sheet名称自定义。

表格：Sheet命名规则与处理策略

Sheet名称字符	是否允许	处理策略
字母数字	✅ 允许	保留原名
空格	✅ 允许	保留原名
* , ? , :	❌ 不允许	替换为下划线 _
长度超过31字符	❌ 不允许	截断为前31个字符

💡 扩展建议：可结合EXT Grid的ID或标题自动生成Sheet名称，增强可读性与一致性。

流程图：多Sheet导出流程

graph TD
    A[遍历多个Grid组件] --> B[为每个Grid生成工作表]
    B --> C[校验Sheet名称合法性]
    C --> D[添加工作表到同一个工作簿]
    D --> E[完成多SheetExcel构建]

本章我们详细介绍了如何使用SheetJS构建Excel文件，并将EXT Grid中的数据写入其中。我们从创建工作簿与工作表的基本操作开始，逐步深入到二维数组的写入方法选择、表头与数据行的合并逻辑，以及多Sheet文件的构建与Sheet名称管理。这些内容为后续的Excel文件导出与下载流程打下了坚实的基础。

在下一章中，我们将继续深入讲解如何将构建好的Excel文件通过Blob对象生成，并使用FileSaver.js实现文件下载，同时探讨如何增强Excel文件的样式与格式，以提升用户体验。

6. 导出Excel文件的实现与功能扩展

在前几章中，我们已经详细探讨了如何从EXT Grid中提取数据，并将其转换为Excel可用的数据格式。接下来，本章将重点介绍如何将这些数据写入Excel文件并实现文件下载，同时还将拓展Excel文件的样式控制与格式增强功能。通过本章的学习，读者将掌握完整的Excel导出流程，并具备进一步优化和扩展该功能的能力。

6.1 使用Blob对象生成Excel文件

在前端生成Excel文件的过程中，Blob对象扮演着核心角色。它允许我们将数据以二进制形式封装，并通过浏览器进行下载或进一步处理。本节将详细介绍如何使用Blob对象将SheetJS生成的Excel数据转换为可下载的文件，并探讨MIME类型和文件扩展名的设置方法。

6.1.1 数据写入Blob对象的方式

在使用SheetJS（js-xlsx）生成Excel文件后，我们通常会得到一个ArrayBuffer或Uint8Array形式的二进制数据。为了将其转换为可下载的文件，我们需要使用Blob对象进行封装。

以下是一个将SheetJS生成的Excel工作簿转换为Blob对象的示例代码：

// 假设 workbook 是通过 XLSX.write 生成的二进制数据
const excelBinary = XLSX.write(workbook, {
    bookType: 'xlsx',   // 导出格式为 xlsx
    type: 'array'       // 返回类型为数组
});

// 创建 Blob 对象
const blob = new Blob([excelBinary], {
    type: 'application/octet-stream'
});

逐行解读分析：

• XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }) ：
• bookType: 'xlsx' 表示输出文件格式为 .xlsx ；
• type: 'array' 表示返回值为 Uint8Array 类型的数组；
• new Blob([excelBinary], { type: 'application/octet-stream' }) ：
• 使用 Blob 构造函数将二进制数据封装为一个 Blob 对象；
• MIME 类型设置为 application/octet-stream ，表示通用的二进制流，适用于大多数浏览器。

6.1.2 MIME类型与文件扩展名的设置

在生成Excel文件时，除了数据内容外，还需要正确设置MIME类型和文件扩展名，以确保浏览器能够正确识别并下载该文件。

MIME类型说明：

文件格式	MIME类型
.xls	application/vnd.ms-excel
.xlsx	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

虽然在大多数现代浏览器中使用通用的 application/octet-stream 也能正常下载，但为了兼容性和规范性，建议使用标准的MIME类型。

文件扩展名处理：

通常，我们会将生成的Excel文件命名为 export.xlsx 或类似的名称。在实际应用中，可以根据业务需求动态生成文件名。

const filename = `export-${new Date().toISOString().slice(0,10)}.xlsx`;

该代码将生成一个以当前日期命名的文件名，例如： export-2025-04-05.xlsx 。

参数说明：
- new Date().toISOString() ：返回当前时间的ISO字符串格式；
- slice(0,10) ：截取前10位字符，即 YYYY-MM-DD 。

6.2 Excel文件下载的实现

在完成Blob对象的创建后，下一步就是实现文件的下载。我们通常使用 FileSaver.js 提供的 saveAs 方法来触发浏览器的下载行为。本节将详细介绍如何使用FileSaver.js进行文件下载，并讨论下载失败的处理机制。

6.2.1 使用FileSaver.js触发下载

FileSaver.js 是一个轻量级的库，它封装了浏览器对文件保存的支持，使得开发者可以轻松地触发文件下载。

以下是完整的文件下载示例代码：

// 假设 blob 是上一步生成的 Blob 对象
saveAs(blob, filename);

逐行解读分析：

• saveAs(blob, filename) ：
• 第一个参数为 Blob 对象；
• 第二个参数为文件名字符串；
• 该方法会自动触发浏览器的下载提示。

注意事项：
- 确保已正确引入 FileSaver.js 库；
- 某些浏览器（如iOS Safari）可能不支持直接下载Blob对象，需进行兼容性处理。

6.2.2 下载失败的处理与提示机制

虽然大多数现代浏览器都支持 FileSaver.js ，但在某些情况下，例如用户禁用了下载权限、文件过大、或浏览器不兼容时，下载可能会失败。因此，我们需要添加错误处理逻辑，并为用户提供友好的提示。

try {
    saveAs(blob, filename);
} catch (error) {
    console.error("文件下载失败：", error);
    alert("导出Excel失败，请刷新页面重试或联系管理员。");
}

优化建议：

• 使用 Promise 或 async/await 封装下载逻辑，便于统一处理；
• 添加“导出中”提示框，提升用户体验；
• 记录错误日志，便于后续分析。

下载失败常见原因与解决办法：

原因	解决方案
浏览器不支持 Blob	使用 window.navigator.msSaveOrOpenBlob （IE）
文件过大导致内存溢出	分批次处理数据或采用服务端导出
用户取消下载	增加确认弹窗，防止误操作
CORS问题导致资源被拦截	设置合适的CORS头或使用服务端中转

6.3 样式与格式增强功能扩展

虽然基础的Excel导出功能已经实现，但在实际应用中，往往还需要对Excel文件的样式和格式进行美化，以提升可读性和专业性。本节将介绍如何在SheetJS中实现单元格样式设置、合并单元格、边框控制以及条件格式等高级功能。

6.3.1 单元格样式与字体设置

SheetJS支持通过 cell.styles 属性为单元格设置样式。不过，由于SheetJS的样式系统较为底层，通常需要手动构造样式对象并绑定到单元格。

const ws = XLSX.utils.aoa_to_sheet([
    ['姓名', '年龄', '城市'],
    ['张三', 28, '北京'],
    ['李四', 32, '上海']
]);

// 设置单元格样式
ws['A1'].s = {
    font: {
        name: '微软雅黑',
        sz: 14,
        bold: true,
        color: { rgb: "FF0000" } // 红色字体
    },
    fill: {
        fgColor: { rgb: "D3D3D3" } // 灰色背景
    }
};

逐行解读分析：

• ws['A1'].s = {...} ：为A1单元格设置样式对象；
• font 部分定义字体样式；
• fill 部分定义背景颜色；
• rgb 使用十六进制颜色值（不带 # ）。

6.3.2 合并单元格与边框控制

SheetJS支持通过 !merges 属性实现单元格合并，该属性接受一个包含起始和结束坐标的数组。

// 合并 A1:C1 单元格
ws['!merges'] = [
    { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }
];

参数说明：
- r 表示行索引（从0开始）；
- c 表示列索引；
- { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } } 表示从A1到C1的合并区域。

边框控制则需要在样式对象中添加 border 属性：

ws['A1'].s = {
    border: {
        top: { style: 'thin', color: { rgb: '000000' } },
        left: { style: 'thin', color: { rgb: '000000' } },
        bottom: { style: 'thin', color: { rgb: '000000' } },
        right: { style: 'thin', color: { rgb: '000000' } }
    }
};

6.3.3 条件格式与数据验证的实现思路

虽然SheetJS本身不直接支持Excel的“条件格式”或“数据验证”功能，但我们可以通过手动构造Excel的XML结构来实现类似效果。这通常需要对Excel的OpenXML格式有一定了解。

实现思路：

1. 使用 XLSX.utils.aoa_to_sheet 创建基础工作表；
2. 通过 XLSX.utils.book_append_sheet 添加工作簿；
3. 手动构建 worksheet.xml 文件内容，插入条件格式规则；
4. 使用 XLSX.write 输出最终Excel文件。

这种方式较为复杂，适合对Excel格式有深入理解的开发者。对于大多数应用场景，建议优先使用服务端Excel库（如 ExcelJS 或 Apache POI ）来处理复杂的格式控制。

示例：条件格式伪代码（示意）

// 伪代码示意，实际需构造XML
const conditionalFormatting = {
    "conditionalFormatting": [
        {
            "range": "B2:B10",
            "rules": [
                {
                    "type": "cellIs",
                    "operator": "greaterThan",
                    "value": 30,
                    "style": {
                        "font": { "color": { "rgb": "FF0000" } }
                    }
                }
            ]
        }
    ]
};

总结与拓展建议

通过本章的学习，我们掌握了如何使用Blob对象生成Excel文件，并通过FileSaver.js实现文件下载。同时，我们也探索了如何在SheetJS中进行单元格样式设置、合并单元格、边框控制等格式优化操作，并了解了条件格式与数据验证的实现思路。

拓展建议：

• 结合CSS样式与HTML表格，实现导出前的预览功能；
• 使用 ExcelJS 或 SheetJS + XLSX.utils 实现服务端Excel生成；
• 开发动态模板导出功能，允许用户选择导出字段和样式；
• 集成日志系统，记录每次导出操作，便于后期审计与分析。

下一章将继续深入完整实现流程，并通过示例代码和兼容性说明帮助开发者更好地落地该功能。

7. 完整实现流程与兼容性说明

7.1 EXT Grid导出Excel的完整流程总结

EXT Grid导出Excel功能的实现是一个典型的前后端协作过程，其核心流程可以概括为以下几个步骤：

1. 获取EXT Grid绑定的Store数据 ：通过Grid组件的 getStore() 方法获取当前绑定的数据源，并使用 each() 方法或 getRange() 方法遍历获取所有数据记录。
2. 提取字段信息与表头映射 ：从Grid的列配置（ columns ）中提取表头文本，处理字段别名、隐藏列等逻辑，形成最终的表头数组。
3. 数据结构转换 ：将原始数据记录转换为SheetJS库所需的二维数组格式，处理如日期格式化、数字精度保留、空值填充等逻辑。
4. 生成Excel文件结构 ：使用SheetJS的 XLSX.utils.aoa_to_sheet() 方法将二维数组转换为Excel工作表，并通过 XLSX.utils.book_new() 和 XLSX.utils.book_append_sheet() 创建并组装工作簿。
5. 导出为Blob对象并触发下载 ：使用SheetJS的 XLSX.write() 方法将工作簿写入Blob对象，并借助FileSaver.js的 saveAs() 函数触发浏览器的下载行为。

整个流程中，EXT JS的Grid组件提供了数据源和列配置的结构支持，SheetJS负责Excel文件的生成与格式控制，FileSaver.js则负责将Blob对象保存为文件并提供下载功能，三者协同完成数据导出任务。

7.2 示例代码解析（grid2excel.js）

下面是一个完整的示例代码文件 grid2excel.js 的核心实现逻辑，展示了如何将EXT Grid数据导出为Excel文件。

// grid2excel.js
Ext.define('MyApp.util.Grid2Excel', {
    singleton: true,

    /**
     * 将EXT Grid导出为Excel文件
     * @param {Ext.grid.Panel} grid - 要导出的Grid组件
     * @param {String} filename - 导出的文件名
     */
    exportGridToExcel: function(grid, filename) {
        const store = grid.getStore();
        const columns = grid.headerCt.getGridColumns();
        const visibleColumns = columns.filter(col => !col.hidden); // 过滤隐藏列

        // 提取表头
        const headers = visibleColumns.map(col => col.text || col.dataIndex);

        // 获取数据
        const records = store.getRange();
        const data = records.map(record => {
            return visibleColumns.map(col => {
                const value = record.get(col.dataIndex);
                return this.formatValue(value);
            });
        });

        // 插入表头到数据最前
        data.unshift(headers);

        // 使用SheetJS生成Excel
        const ws = XLSX.utils.aoa_to_sheet(data);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

        // 生成Blob并触发下载
        const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'blob' });
        saveAs(wbout, (filename || 'export') + '.xlsx');
    },

    /**
     * 格式化数据值（可扩展）
     * @param {*} value - 原始数据值
     * @returns {String|*}
     */
    formatValue: function(value) {
        if (value instanceof Date) {
            return Ext.Date.format(value, 'Y-m-d');
        } else if (typeof value === 'number') {
            return value.toFixed(2); // 保留两位小数
        }
        return value;
    }
});

函数结构与模块划分说明

• exportGridToExcel(grid, filename) ：主函数，负责协调整个导出流程。
• formatValue(value) ：辅助函数，用于处理特殊字段的格式化逻辑，如日期、数字等。
• 使用 singleton: true 定义为单例工具类，便于全局调用。

事件绑定与执行流程说明

在实际项目中，可以通过在Grid的工具栏中添加一个按钮来触发导出功能：

Ext.create('Ext.grid.Panel', {
    title: '数据表格',
    store: myStore,
    columns: [ ... ],
    tbar: [{
        text: '导出Excel',
        handler: function() {
            MyApp.util.Grid2Excel.exportGridToExcel(this.up('grid'), '订单数据');
        }
    }]
});

当用户点击“导出Excel”按钮时， handler 回调会调用 exportGridToExcel() 方法，依次执行数据提取、格式转换、Excel生成和下载流程。

7.3 库版本兼容性与环境限制分析

7.3.1 不同浏览器中的表现差异

浏览器	FileSaver.js支持	Blob支持	SheetJS支持	备注
Chrome	✅	✅	✅	最新版本支持良好
Firefox	✅	✅	✅	支持良好
Safari	⚠️（部分限制）	✅	✅	文件名中文乱码问题
Edge	✅	✅	✅	支持良好
IE 11	❌	⚠️	⚠️	不推荐，兼容性差

Safari兼容性问题 ：Safari浏览器在使用FileSaver.js时可能出现文件名乱码问题，建议使用英文文件名或使用 encodeURIComponent() 处理中文。

7.3.2 Ext JS版本与SheetJS版本的适配

Ext JS版本	SheetJS版本要求	兼容性说明
Ext JS 6.x	SheetJS >= 0.16.0	推荐使用XLSX版本，支持ES6模块
Ext JS 5.x	SheetJS <= 0.15.0	使用UMD模块加载方式更稳定
Ext JS 4.x	SheetJS <= 0.13.0	需要手动封装模块，兼容性较低

建议 ：使用最新稳定版SheetJS（如0.18.x），配合Ext JS 6或7使用，可获得最佳体验。对于旧版本Ext JS项目，建议通过封装模块或使用CDN方式引入SheetJS。

7.4 未来扩展方向与优化建议

7.4.1 服务端导出与大数据量处理

前端导出适合小数据量（通常<1万条），对于大数据量建议采用服务端导出方式：

• 利用Node.js（如SheetJS服务端版本）或Java（如Apache POI）生成Excel文件。
• 前端发送请求，后端生成文件后返回下载链接或直接流式传输。

7.4.2 支持更多格式（如CSV、PDF）的导出

可以基于现有代码结构进行扩展，支持CSV导出：

const csv = XLSX.utils.aoa_to_csv(data);
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
saveAs(blob, 'data.csv');

PDF导出则可结合 jsPDF 与 html2canvas 库将Grid内容截图后生成PDF文档。

7.4.3 可配置化与插件化开发思路

建议将导出功能封装为可配置的Ext JS插件，支持以下特性：

• 配置导出字段白名单
• 自定义格式化函数
• 多Sheet导出支持
• 导出按钮样式与位置配置

通过插件机制，可提高复用性与灵活性，适应不同项目需求。

示例插件配置方式：

plugins: [{
    ptype: 'gridexcel',
    exportButtonConfig: {
        text: '导出Excel',
        iconCls: 'x-fa fa-file-excel-o'
    },
    formatMap: {
        'amount': function(value) { return value.toFixed(2); },
        'date': function(value) { return Ext.Date.format(value, 'Y-m-d'); }
    }
}]

本章通过完整流程梳理、示例代码解析和兼容性说明，帮助开发者全面掌握EXT Grid导出Excel的实现方式，并提供未来扩展方向的建议，为构建稳定高效的导出功能提供支撑。

本文还有配套的精品资源，点击获取

简介：EXT Grid是一款基于JavaScript的数据网格组件，广泛应用于Web系统中展示和管理结构化数据。本文详细讲解如何在EXT Grid中实现将数据显示导出到Excel的功能，核心依赖浏览器Blob对象和FileSaver.js库，并结合SheetJS处理Excel文件的生成与保存。通过完整流程解析，帮助开发者掌握EXT Grid导出Excel的实现方法与注意事项。

本文还有配套的精品资源，点击获取