前端文件下载的便捷实现

在前端开发中，文件下载是一个不可或缺的功能。本文将深入探讨前端文件下载的两种主要方法，即静态文件直接下载和文件流下载，并提供详细的实现指南。

直接下载是最简单快捷的文件下载方式，适合下载不需要服务器端处理的静态文件。它只需在 HTML 中创建一个带有适当属性的 <a> 标签即可。

<a href="file.txt" download>下载文件</a>

当用户点击此链接时，浏览器将立即开始下载文件，文件名将使用 <a> 标签中指定的名称。

文件流下载提供了一种更灵活的方式来下载文件，因为它允许服务器端在将文件发送到客户端之前对其进行处理。这种方法通常用于从数据库或其他来源动态生成文件。

要进行文件流下载，需要在服务器端创建一个端点以提供文件内容，并在前端使用 XMLHttpRequest 或 fetch API 来获取文件流。

// 使用 XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/download');
xhr.responseType = 'blob';
xhr.onload = () => {
  const blob = xhr.response;
  const fileName = 'downloaded-file.txt';
  const url = URL.createObjectURL(blob);

  // 创建一个带下载属性的 a 标签
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  a.click();
};
xhr.send();

// 使用 fetch
fetch('/api/download', {
  method: 'GET',
})
.then(res => res.blob())
.then(blob => {
  const fileName = 'downloaded-file.txt';
  const url = URL.createObjectURL(blob);

  // 创建一个带下载属性的 a 标签
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  a.click();
});

直接下载和文件流下载各有其优势和劣势。直接下载简单快捷，而文件流下载提供更大的灵活性。

对于需要服务器端处理或动态生成的文件，文件流下载是更合适的选择。而对于静态文件，直接下载则更简单。