JavaScript实现文件下载完整方案

javascript 复制代码
APIRequest.downloadRequest({
  id: row.id, // 从当前数据行获取文件唯一标识
}).then(res => {
  // 将响应数据转换为Blob对象
  const blobData = new Blob([res], {
    type: 'application/octet-stream' // 设置二进制流类型
  });
  
  // 创建临时URL
  const url = window.URL.createObjectURL(blobData);
  
  // 创建下载链接元素
  const link = document.createElement('a');
  link.href = url;
  
  // 设置下载文件名(使用数据行中的objectName属性)
  link.setAttribute('download', row.objectName || 'download_file');
  
  // 将链接添加到DOM中(部分浏览器需要元素在文档中才能触发下载)
  document.body.appendChild(link);
  
  // 模拟点击下载
  link.click();
  
  // 下载完成后移除临时元素
  setTimeout(() => {
    document.body.removeChild(link);
    // 释放URL对象
    window.URL.revokeObjectURL(url);
  }, 100);
  
  // 显示成功提示
  this.$message.success(`文件"${row.objectName}"下载成功`);
}).catch(error => {
  // 错误处理
  console.error('下载失败:', error);
  this.$message.error('文件下载失败');
});

这个扩展版本增加了以下细节:

  1. 添加了Blob的类型指定
  2. 增加了默认文件名处理
  3. 添加了URL对象的释放
  4. 加入了错误处理逻辑
  5. 完善了下载完成后的清理工作
  6. 在成功提示中显示具体的文件名
  7. 使用setTimeout确保DOM操作完成
相关推荐
我命由我123451 分钟前
访客系统形式(有用户概念、无用户概念)
java·开发语言·前端·javascript·python·产品运营·产品经理
key_3_feng16 分钟前
评估与对齐:Agent 自我进化的护栏
前端·数据库·agent
程序员大阳32 分钟前
副队长JavaScript教程(65)-详解JSON:轻量级数据交换格式
javascript·json·序列化·反序列化·stringify·parse
LaughingZhu1 小时前
Product Hunt 热榜 2026-10-30:Empacer、Scape、Floot in ChatGPT
java·前端·数据库·人工智能·chatgpt·notion
Lank_M1 小时前
抠图结果缩放后边缘发脏,该怪的不是插值
前端
jerrywus1 小时前
Skill、MCP、Workflow、Rules、Memory 有什么区别?拿几次真实开发任务讲清楚
前端·agent·claude
补码缩写1 小时前
canvas 与 sharp 缩放透明图:默认预乘,非预乘得拆通道
前端
静默回滚1 小时前
抠图 PNG 缩小再放大,边缘又糊又白是两件事
前端
用户11977079480731 小时前
GitHub 电商开源项目分享:用 sharp 批量出饰品主图,试了裁剪、细节图和色彩配置文件三个坑
前端·node.js
deli0071 小时前
地图定位为什么偏了 500 米?GPS 与火星坐标实测
前端