Flutter Web下载CSV并保持代码跨平台的实现方案咨询

问题1：跨平台实现Web端CSV下载的方案 #

你可以使用universal_html兼容包，它对多平台的html能力做了封装：

• Web环境下自动映射系统原生dart:html能力，原有下载逻辑完全不需要修改
• 安卓/iOS环境下自动返回空实现，不会触发编译报错
  使用方法非常简单：把你原有代码里的import 'dart:html' as html;替换为import 'package:universal_html/html.dart' as html;即可。

问题2：仅Web环境编译执行dart:html代码的方案 #

可以用Dart原生的条件导入语法，无需引入任何第三方包，就能实现编译期的平台代码隔离，彻底避免安卓/iOS编译时识别到dart:html相关代码：

实现步骤 #

1. 新建两个文件分别存放不同平台的实现：

• download_web.dart（Web端实现）：

import 'dart:html' as html;

void downloadCsv(String csv, String fileName) {
  html.AnchorElement(href: "data:text/plain;charset=utf-8,$csv")
    ..setAttribute("download", fileName)
    ..click();
}

• download_native.dart（原生端占位实现）：

void downloadCsv(String csv, String fileName) {
  // 安卓/iOS端无需执行该逻辑，留空即可，也可以在这里写原生端文件落盘逻辑
}

2. 在你的业务代码文件中使用条件导入语法引入对应实现：

// 条件导入：非Web环境用native实现，Web环境自动切换为web实现
import 'download_native.dart' if (dart.library.html) 'download_web.dart';
import 'package:flutter/foundation.dart';

3. 改造原有业务逻辑，直接调用通用方法即可：

if (kIsWeb) { // 用Flutter官方提供的kIsWeb常量判断比自定义平台判断更可靠
  downloadCsv(csv, "report.csv");
} else {
  // 原有安卓/iOS端发送邮箱的逻辑
}

这种方案是Dart官方原生支持的，编译期就会把对应平台无关的代码完全剔除，不会有任何编译冲突，也不会引入额外的包体积。

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