如何在Flutter应用中展示并编辑Excel表格？

一、读取Excel文件 #

先在pubspec.yaml中添加依赖：

dependencies:
  excel: ^2.0.0
  path_provider: ^2.0.15 # 用于获取本地存储路径

读取本地Excel文件的示例代码：

import 'package:excel/excel.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';

Future<Excel> loadLocalExcel() async {
  Directory appDocDir = await getApplicationDocumentsDirectory();
  String filePath = '${appDocDir.path}/target.xlsx';
  File file = File(filePath);
  var bytes = file.readAsBytesSync();
  return Excel.decodeBytes(bytes);
}

如果是从assets读取，需要先在pubspec.yaml声明assets路径，再通过rootBundle.load获取字节流解析。

二、展示Excel内容 #

用Flutter自带的DataTable组件实现表格展示，先将Excel数据转换为二维数组：

class ExcelDisplayTable extends StatefulWidget {
  final Excel excelData;
  const ExcelDisplayTable({super.key, required this.excelData});

  @override
  State<ExcelDisplayTable> createState() => _ExcelDisplayTableState();
}

class _ExcelDisplayTableState extends State<ExcelDisplayTable> {
  late Sheet _activeSheet;
  late List<List<dynamic>> _cellData;

  @override
  void initState() {
    super.initState();
    _activeSheet = widget.excelData.tables.values.first;
    // 把Sheet数据转成易处理的二维数组
    _cellData = _activeSheet.rows.map((row) {
      return row.map((cell) => cell?.value ?? '').toList();
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: DataTable(
        columns: _activeSheet.firstRow?.map((cell) {
              return DataColumn(label: Text(cell?.value ?? ''));
            }).toList() ?? [],
        rows: _cellData.map((row) {
          return DataRow(cells: row.map((value) {
            return DataCell(Text(value.toString()), onTap: () => _editCell(_cellData.indexOf(row), row.indexOf(value)));
          }).toList());
        }).toList(),
      ),
    );
  }
}

三、实现单元格编辑功能 #

通过点击单元格弹出编辑对话框的方式实现基础编辑：

void _editCell(int rowIdx, int colIdx) {
  TextEditingController editController = TextEditingController(
    text: _cellData[rowIdx][colIdx].toString(),
  );
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: const Text('编辑单元格'),
      content: TextField(controller: editController),
      actions: [
        TextButton(onPressed: () => Navigator.pop(context), child: const Text('取消')),
        TextButton(
          onPressed: () {
            setState(() {
              _cellData[rowIdx][colIdx] = editController.text;
            });
            Navigator.pop(context);
          },
          child: const Text('保存'),
        ),
      ],
    ),
  );
}

如果需要更原生的单元格内编辑体验，可以尝试第三方组件（如flutter_tableview），但自带对话框方式足够满足基础需求。

四、保存编辑后的Excel #

将修改后的二维数组写回Excel文件：

Future<void> saveEditedExcel() async {
  Excel editedExcel = Excel.createExcel();
  Sheet targetSheet = editedExcel['EditedSheet'];
  
  // 遍历数据写入单元格
  for (int i = 0; i < _cellData.length; i++) {
    for (int j = 0; j < _cellData[i].length; j++) {
      targetSheet.cell(CellIndex.indexByColumnRow(columnIndex: j, rowIndex: i)).value = _cellData[i][j];
    }
  }

  // 保存到本地目录
  Directory appDocDir = await getApplicationDocumentsDirectory();
  String savePath = '${appDocDir.path}/edited_target.xlsx';
  File saveFile = File(savePath);
  saveFile.writeAsBytesSync(editedExcel.encode()!);
}

额外说明 #

• 若Excel包含合并单元格、复杂公式或样式，excel包的支持有限，这种情况可以考虑用flutter_xlsx_reader仅读取数据，或者通过WebView加载在线Excel编辑器（需依赖网络）。
• 处理大文件时，建议分批读取和写入，避免内存占用过高。

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