基于Angular的Excel Office Add-in批量数据变更追踪问题求助

我正在开发基于Angular的Excel Office加载项，要实现数据表与服务器的同步交互。参考微软文档用sheet.onChanged方法追踪工作表变更，但碰到问题：单个单元格增删改能捕获数据，但删除整行、拖拽修改数据范围时，拿不到变更前的数据。我的目标是捕获Excel表格中所有增删改的数据，有没有其他函数能实现范围变更的数据追踪？

当前使用的代码如下：

async trackSheetData(worksheetName: string) {
    await Excel.run(async (context) => {
        let sheet = context.workbook.worksheets.getItem(worksheetName);
        sheet.onChanged.add(this.handleChange);
    });
}

// 处理变更的函数
async handleChange(event) {
    await Excel.run(async (context) => {
        let activeSheet = context.workbook.worksheets.getActiveWorksheet();
        activeSheet.load("name");
        await context.sync();
        console.log("变更类型: " + event.changeType);
        console.log("变更地址: " + event.address);
        console.log("变更所在工作表: " + activeSheet.name);
        console.log(event);
    }).catch((err) => console.log(err));
}

测试场景：

• 空单元格新增数据：可正常捕获事件详情
• 修改单个单元格：可正常捕获事件详情
• 删除整行（范围操作）：无法获取变更前的数据
• 拖拽修改数据范围：无法获取变更前的数据

针对范围操作（删整行、拖拽修改）无法获取变更前数据的问题，可以通过以下几种方式实现完整的数据追踪：

1. 结合行/列级别的专用事件 #

Excel JS API提供了针对行和列的独立事件，能精准捕获整行/列的增删操作：

• Worksheet.onRowDeleted：捕获行删除事件，可获取被删除行的索引信息
• Worksheet.onRowAdded：捕获行新增事件
• Worksheet.onColumnDeleted/Worksheet.onColumnAdded：对应列的增删事件

示例代码：

async trackSheetData(worksheetName: string) {
    await Excel.run(async (context) => {
        let sheet = context.workbook.worksheets.getItem(worksheetName);
        // 原有单元格变更事件
        sheet.onChanged.add(this.handleChange);
        // 新增行删除事件监听
        sheet.onRowDeleted.add(this.handleRowDeleted);
        // 新增行新增事件监听
        sheet.onRowAdded.add(this.handleRowAdded);
    });
}

async handleRowDeleted(event) {
    await Excel.run(async (context) => {
        console.log("被删除的行索引: " + event.rowIndex);
        // 可结合之前预存的行数据快照，获取删除前的内容
    });
}

2. 预存数据快照+变更后对比 #

对于拖拽修改这类范围变更，可定期或在关键操作前保存工作表数据的快照，当onChanged触发时，对比快照与当前数据，找出变更前后的差异：

步骤：

1. 初始化时加载并保存目标区域的所有数据作为初始快照
2. 每次onChanged事件触发后，重新加载当前区域数据
3. 对比快照与当前数据，识别新增、修改、删除的内容
4. 更新快照为最新数据

示例代码片段：

private dataSnapshot: any[][] = [];

async initSnapshot(worksheetName: string, rangeAddress: string) {
    await Excel.run(async (context) => {
        let sheet = context.workbook.worksheets.getItem(worksheetName);
        let range = sheet.getRange(rangeAddress);
        range.load("values");
        await context.sync();
        this.dataSnapshot = JSON.parse(JSON.stringify(range.values)); // 深拷贝保存快照
    });
}

async handleChange(event) {
    await Excel.run(async (context) => {
        let sheet = context.workbook.worksheets.getItem(event.worksheetId);
        let range = sheet.getRange(event.address);
        range.load("values");
        await context.sync();
        
        // 对比当前range.values与dataSnapshot中对应区域的数据
        // 实现差异逻辑，获取变更前后内容
        
        // 更新快照
        this.updateSnapshot(event.address, range.values);
    });
}

private updateSnapshot(address: string, newValues: any[][]) {
    // 根据address解析行列，更新dataSnapshot对应位置的数据
}

3. 使用Table对象的事件（如果数据在表格中） #

如果你的数据是Excel内置表格（Table），可以使用Table.onChanged事件，它能更精准地捕获表格内的行增删改，包括范围操作的变更细节：

async trackTableChanges(tableName: string) {
    await Excel.run(async (context) => {
        let table = context.workbook.tables.getItem(tableName);
        table.onChanged.add(this.handleTableChange);
    });
}

async handleTableChange(event) {
    await Excel.run(async (context) => {
        console.log("表格变更类型: " + event.changeType);
        console.log("受影响的行索引: " + event.rowIndex);
        // Table的变更事件会提供更丰富的表格相关变更信息
    });
}

注意：Table.onChanged仅适用于Excel内置表格，若你的数据是普通单元格区域，需先将其转换为Table。

内容的提问来源于stack exchange，提问作者ZuhairMakda