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操作完成
相关推荐
风骏时光牛马1 小时前
数据可视化管理平台
前端
哎哟喂呢哈1 小时前
VedioJS 10
javascript·html5
仿生狮子6 小时前
OpenAI 攻下千禧年难题之后,开发者似乎无动于衷
前端·数学·vibecoding
夏幻灵9 小时前
JavaScript this 面试:五种绑定规则、优先级与常见面试陷阱
开发语言·javascript·面试
Lvan的前端笔记9 小时前
docker:每个前端项目一个 Nginx 容器还是只有一个Nginx容器
前端·nginx·docker
三天不学习10 小时前
Egg.js 4 突然爆火,原因是否归结于AI 原生落地需求爆发?
前端·javascript·全栈·egg.js
xcs1940510 小时前
前端 vue 的前端页面debugger 进不去
前端·javascript·vue.js
明月_清风11 小时前
Deno 终局来了:从挑战 Node 到被 Cloudflare 收编
前端·后端·node.js
Csvn12 小时前
框架性能优化
前端