Flutter网页端本地CV文件下载失败问题求助

问题原因 #

直接使用相对路径/assets/files/Hassan_Naveed_CV.pdf无法访问Flutter Web打包后的资源文件——Flutter会将assets编译到特定内部路径，而非直接暴露为浏览器可直接访问的URL路径，导致下载链接无效。

解决方案 #

1. 确认pubspec.yaml的Assets配置
   先确保pubspec.yaml中正确声明了目标资源，格式如下：

   flutter:
     assets:
       - assets/files/Hassan_Naveed_CV.pdf
   

2. 修改下载函数
   通过rootBundle加载资源字节数据，再生成Blob临时链接实现下载，替代原有的直接路径调用：

   import 'dart:html' as html;
   import 'package:flutter/services.dart';
   
   Future<void> downloadCV() async {
     // 加载assets中的PDF文件字节数据
     final ByteData data = await rootBundle.load('assets/files/Hassan_Naveed_CV.pdf');
     final Uint8List bytes = data.buffer.asUint8List();
     
     // 创建Blob对象标记文件类型
     final html.Blob blob = html.Blob([bytes], 'application/pdf');
     final String url = html.Url.createObjectUrlFromBlob(blob);
     
     // 创建下载链接并触发点击
     final html.AnchorElement anchor = html.AnchorElement(href: url)
       ..download = 'Hassan_Naveed_CV.pdf'
       ..click();
     
     // 释放临时URL资源，避免内存泄漏
     html.Url.revokeObjectUrl(url);
   }
   

3. 更新按钮点击事件
   将TextButton的onPressed改为调用异步下载函数：

   TextButton(
     onPressed: downloadCV,
     child: FittedBox(
       child: Row(
         children: [
           Text(
             "Download CV",
             style: TextStyle(
               color: Theme.of(context).textTheme.bodyText1!.color
             ),
           ),
           const SizedBox(width: defaultPadding / 2),
           const Icon(Icons.download, color: Color(0xFF8B8B8D))
         ],
       ),
     ),
   )
   

关键说明 #

• rootBundle.load能正确获取Flutter Web打包后的资源内容，规避路径匹配错误
• Blob临时URL的方式会让浏览器识别为可下载文件，而非尝试直接访问无效的资源路径

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