# 前端常见下载处理方案

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

# a标签下载

<a href="test.xlsx" download="test.txt">下载</a>
1

这种是我们常见的下载静态文件的处理方式,这种适用于项目文件是静态的以及存放地点不变动的。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>
1
2
3
4

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

# Blob流下载

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

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

简单的示例:

const disposition = decodeURI(xhr.getResponseHeader('Content-Disposition')); // 文件名处理
const dispositionArray = disposition.split('filename=');
const name = dispositionArray[dispositionArray.length - 1];
const disposition = decodeURI(xhr.getResponseHeader('Content-Disposition')); // 文件名处理
const dispositionArray = disposition.split('filename=');
const name = dispositionArray[dispositionArray.length - 1];
const blob = window.URL.createObjectURL(res.data); // 创建对象URL 
reader.onload = function(e) {
  const link = document.createElement('a');
  link.style.display = 'none';
  link.href = blob;
  link.setAttribute('download', decodeURI(fileName));
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  window.URL.revokeObjectURL(blob);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

后端需要设置

Access-Control-Expose-Headers: Content-Disposition
1

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

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属性中将包含一个字符串以表示所读取的文件内容。
1
2
3
4
5
6
7
8

# 总结

以上的三种处理方案是我们常见的前端下载简单汇总,方案不同,效果不同,不过还是推荐Blob方式下载,这种处理方式,可以更加灵活的捕捉到不同状态,前端可以更加方便的处理。

更新于: 12/8/2019, 1:11:06 PM