JavaScript实现文件下载并重命名代码实例

接下来我会详细讲解如何使用JavaScript实现文件下载并重命名的完整攻略。

1. 使用XMLHttpRequest下载文件

使用XMLHttpRequest可以更加灵活地控制文件下载过程，并且可以同时下载多个文件。

function downloadFile(url, filename) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        const blob = new Blob([xhr.response]);
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = filename;
        a.click();
        resolve();
      } else {
        reject(new Error('下载文件失败'));
      }
    };
    xhr.send();
  });
}

这段代码中我们新建了一个Promise对象，使用XMLHttpRequest来发送GET请求，返回类型设置为blob对象，因为文件是二进制数据。如何readyState为4且status为200时，将获取到的二进制数据转成Blob对象，并通过URL.createObjectURL方法创建一个URL，然后创建一个<a>元素，设置其href为URL，download属性为要重命名后的文件名，最后通过a.click()方法来模拟点击下载文件。如果下载成功，则调用resolve()来将该Promise对象置为成功状态，否则调用reject()方法将其置为失败状态。

2. 使用fetch下载文件

使用fetch也可以下载文件，下面是使用fetch实现文件下载并重命名的代码：

function downloadFile(url, filename) {
  return fetch(url).then(res => {
    return res.blob();
  }).then(blob => {
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = filename;
    a.click();
  }).catch(error => {
    console.error('下载文件失败', error);
  });
}

首先使用fetch方法获取资源，然后调用blob()方法转换为二进制对象，再用与上面方法类似的方式使用<a>标签将获取到的资源以指定的文件名下载到本地。

3. 使用async/await函数封装

以上两个方法均使用了Promise对象处理异步请求，下面我来对其进行封装：

async function downloadFile(url, filename) {
  try {
    const response = await fetch(url);
    const blob = await response.blob();
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = filename;
    a.click();
  } catch (error) {
    console.error('下载文件失败', error);
  }
}

这里用async/await语法糖来处理异步请求，使代码更加简洁。在try-catch语句中，首先await获取到文件流，接下来转换为blob对象，并使用<a>标签进行下载。如果请求失败则会被catch到，并报出错误。