Flutter Web通过URL下载文件时代码仅在浏览器打开如何解决

你当前的实现触发浏览器预览而非下载有两个核心原因：

1. 浏览器的download属性仅对同域资源生效，跨域资源会自动忽略该属性，直接触发预览
2. download属性的赋值应该为用户保存到本地的目标文件名，而非完整文件URL，你的赋值逻辑不符合规范

方案1：前端Blob中转下载（兼容跨域场景） #

如果无法修改服务端配置，可以先将文件请求到前端转成Blob对象，再生成临时URL触发下载，示例代码如下：

import 'dart:html' as html;
import 'package:http/http.dart' as http;

Future<void> downloadFile(String fileRemoteUrl, String localSaveName) async {
  // 请求文件二进制数据
  final res = await http.get(Uri.parse(fileRemoteUrl));
  // 构造Blob对象
  final fileBlob = html.Blob([res.bodyBytes]);
  // 生成Blob临时访问地址
  final tempUrl = html.Url.createObjectUrlFromBlob(fileBlob);
  // 构造下载锚点
  final downloadAnchor = html.AnchorElement(href: tempUrl)
    ..download = localSaveName
    ..target = '_blank';
  // 触发下载
  html.document.body?.append(downloadAnchor);
  downloadAnchor.click();
  // 清理临时资源避免内存泄漏
  downloadAnchor.remove();
  html.Url.revokeObjectUrl(tempUrl);
}

注意事项：

• 文件服务端需要配置CORS规则，允许你的Flutter Web站点跨域请求资源，否则会触发跨域拦截
• 需要提前在pubspec.yaml中引入http依赖

方案2：服务端配置响应头（最优方案，无兼容问题） #

如果可以调整文件服务的配置，直接在返回文件的响应头中添加如下字段即可：

Content-Disposition: attachment; filename="自定义文件名.后缀"

配置完成后，即使直接用你最开始的锚点点击逻辑，也会直接触发下载而非预览，无需前端额外处理，兼容性最好。

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