Flutter Web中如何下载通过csv包生成的CSV文件

核心思路 #

Flutter Web可直接借助浏览器原生API触发下载，无需额外第三方包（除你已使用的csv包），通过创建Blob对象、生成下载链接并模拟点击完成操作。

具体实现步骤 #

1. 导入Web环境专属的dart:html包

import 'dart:html' as html;

2. 编写通用下载函数
   该函数接收生成好的CSV字符串和自定义文件名：

void downloadCsv(String csvContent, String fileName) {
  // 将CSV字符串转换为字节数据
  final bytes = html.Utf8Encoder().convert(csvContent);
  // 创建符合CSV格式的Blob对象
  final blob = html.Blob([bytes], 'text/csv');
  // 生成Blob的临时下载URL
  final url = html.Url.createObjectUrlFromBlob(blob);
  // 创建隐藏的a标签用于触发下载
  final anchor = html.AnchorElement(href: url)
    ..setAttribute('download', fileName)
    ..style.display = 'none';
  // 插入DOM并模拟点击
  html.document.body?.append(anchor);
  anchor.click();
  // 清理临时资源
  html.document.body?.remove(anchor);
  html.Url.revokeObjectUrl(url);
}

3. 结合按钮触发下载
   假设你已用csv包生成CSV字符串并存储在generatedCsv变量中，按钮可这样编写：

ElevatedButton(
  onPressed: () {
    // 替换为你实际生成的CSV字符串
    final String generatedCsv = "name,age\nAlice,25\nBob,30";
    downloadCsv(generatedCsv, 'user_data.csv');
  },
  child: const Text('下载CSV文件'),
)

注意事项 #

• 由于dart:html仅支持Web环境，若为跨平台项目，需添加平台判断避免报错：

import 'dart:io' show Platform;

// 调用下载前判断平台
if (Platform.isWeb) {
  downloadCsv(generatedCsv, 'user_data.csv');
}

• 文件名建议添加.csv后缀，确保浏览器正确识别文件类型。

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