前端常见下载处理方案

最新推荐文章于 2025-06-14 13:23:59 发布

转载最新推荐文章于 2025-06-14 13:23:59 发布 · 483 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5ce2854ff265da1b86085a0e

文章标签：

#前端 #json #ViewUI

博客介绍了前端常见的三种下载处理方案。a标签下载适用于静态文件且存放地点不变的情况；Form表单下载可做特殊处理并传入更多参数；Blob流下载能更灵活处理不同状态，推荐使用该方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载是我们项目中常常会遇到的需求，不同的下载方案能呈现不同的效果，近期归纳下作者系统中用到常见几种下载处理方案

a标签下载

<a href="test.xlsx" download="test.txt">下载</a>
复制代码

这种是我们常见的下载静态文件的处理方式，这种适用于项目文件是静态的以及存放地点不变动的。download属性还可以对文件命名处理

Form表单下载

<form method="get" target="name" action="test.com">
    <input type="hidden" name="token" value="token">
    <input type="hidden" name="url" value="/api/download">
</form>
复制代码

表单的下载可以做特殊的传值处理，也可以传入更多的参数；请求方式也多种多样。

Blob流下载

用上面方式下载处理，当用户点击下载时，前端不能够很好的捕捉到请求的状态，而用Blob我们可以更灵活的来处理不同状态。

Blob 对象表示一个不可变、原始数据的类文件对象。

简单的示例：

const blob = response;
const reader = new FileReader();
reader.readAsDataURL(blob); // 转换为base64，可以直接放入a表情href
const disposition = decodeURI(xhr.getResponseHeader('Content-Disposition')); // 文件名处理
const dispositionArray = disposition.split('filename=');
const name = dispositionArray[dispositionArray.length - 1];
reader.onload = function(e) {
  // 转换完成，创建一个a标签用于下载
  const a = document.createElement('a');
  a.download = name;
  a.href = e.target.result;
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    document.body.removeChild(a);
  }, 100);
};
复制代码

通过后台返回的数据来判断是否显示错误提示，也可以根据接口不同状态值来显示。

const reader = new FileReader();
reader.onload = e => {
  if (e.target.result.includes('"data":""')) {
    const result = JSON.parse(e.target.result);
    console.log(result.msg);
  }
};
reader.readAsText(response); // 读取指定的Blob中的内容，result属性中将包含一个字符串以表示所读取的文件内容。
复制代码