Flutter Web中如何自定义下载文件的文件名？

你的代码无效的核心原因是：Firebase Storage返回的下载链接会携带Content-Disposition响应头，其中包含文件存储时的原始文件名，浏览器会优先读取这个头信息来命名下载文件，因此直接设置AnchorElement的download属性会被忽略。

下面提供两种可行的解决方案：

方案一：修改文件元数据指定下载文件名 #

通过设置Firebase Storage文件的contentDisposition元数据，强制浏览器使用你指定的文件名。你可以在上传文件时设置，也可以修改已存在文件的元数据：

上传时设置元数据 #

// 示例：上传文件时指定下载文件名
final metadata = SettableMetadata(
  contentDisposition: 'attachment; filename="自定义文件名.pdf"',
);
await FirebaseStorage.instance.ref('path/to/file/$fileName').putFile(yourFile, metadata);

修改现有文件的元数据 #

// 示例：更新已存在文件的元数据
final pathRef = FirebaseStorage.instance.ref('path/to/file/$fileName');
await pathRef.updateMetadata(SettableMetadata(
  contentDisposition: 'attachment; filename="自定义文件名.pdf"',
));

设置完成后，再用你原来的下载代码即可生效。

方案二：先下载文件到内存再触发下载 #

如果不想修改文件元数据，可以先将文件内容下载到内存，再通过Blob生成可自定义文件名的下载链接：

Future<void> downloadFile(String fileName) async {
  debugPrint('Downloading file $fileName...');

  final storageRef = FirebaseStorage.instance.ref();
  final pathRef = storageRef.child('path/to/file/$fileName');
  
  // 下载文件内容到内存
  final bytes = await pathRef.getData();
  if (bytes == null) return;

  // 创建Blob并生成临时URL
  final blob = html.Blob([bytes]);
  final tempUrl = html.Url.createObjectUrlFromBlob(blob);

  // 创建下载锚点
  final anchor = html.AnchorElement(href: tempUrl)
    ..download = '自定义文件名.pdf' // 这里指定目标文件名
    ..style.display = 'none';

  html.document.body?.append(anchor);
  anchor.click();

  // 清理临时资源
  html.Url.revokeObjectUrl(tempUrl);
  anchor.remove();
}

内容的提问来源于stack exchange，提问作者JAgüero