无需刷新页面，ajax异步文件下载新姿势，体验极佳！

2023-11-30 23:19:08

每次遇到文件导出的时候，总是先通过参数拼接得到一个url，然后通过创建a标签或window.open(url, '_blank')的方式打开链接实现下载，这种确实是最简单最方便的方式，but有一系列问题，比如：

用户体验差，每次下载都会刷新页面，用户需要重新加载页面，这对于大文件下载来说非常耗时且烦人。
无法获取下载进度，用户不知道下载是否成功，也不知道下载了多少，这对于大文件下载来说尤其重要。
无法断点续传，如果下载过程中断，则需要从头开始下载，这对于大文件下载来说非常浪费时间和流量。

为了解决这些问题，我们可以使用ajax技术实现文件流下载。ajax是一种异步通信技术，它允许我们向服务器发送请求并获取响应，而无需刷新页面。这使得我们可以在后台下载文件，而无需中断用户与页面的交互。

实现ajax文件流下载需要以下步骤：

创建一个XMLHttpRequest对象。
打开一个GET请求，并指定文件下载的url。
设置请求头，包括Content-Type和Accept。
发送请求。
监听服务器的响应。
当服务器响应时，检查响应状态码。
如果响应状态码为200，则开始下载文件。
将文件数据写入本地文件。
下载完成后，关闭XMLHttpRequest对象。

以下是一个简单的ajax文件流下载示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'file.txt');
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.setRequestHeader('Accept', 'application/octet-stream');
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var blob = new Blob([xhr.response]);
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = 'file.txt';
    link.click();
  }
};

这个示例代码首先创建一个XMLHttpRequest对象，然后打开一个GET请求，并指定文件下载的url。接下来，设置请求头，包括Content-Type和Accept。然后发送请求，并监听服务器的响应。当服务器响应时，检查响应状态码。如果响应状态码为200，则开始下载文件。将文件数据写入本地文件。下载完成后，关闭XMLHttpRequest对象。

ajax文件流下载相比于传统的文件下载方式，具有以下优点：