1. 直接通过 HTML 标签实现文件下载
最常见且简便的文件下载方式是使用 HTML 的 标签，配合 download 属性，允许用户下载文件。适用于静态文件和指定的文件路径。
方法：
href: 指定文件路径，可以是相对路径或绝对路径。download: 指定下载时文件的名称。如果省略，会使用文件的默认名称。
优点：
简单易用，不需要 JavaScript。浏览器原生支持。可用于静态资源的下载。
缺点：
仅限于文件已经存在并且直接通过 URL 访问。不适合动态生成的文件或处理复杂的下载逻辑。
参考文档：
MDN - HTML download attribute
2. 使用 JavaScript 创建下载链接
JavaScript 可以通过动态创建 标签并触发点击事件来实现文件的下载。这种方式适用于在运行时动态生成文件内容或处理复杂的下载逻辑。
方法：
function downloadFile() {
const blob = new Blob(['Hello, World!'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'hello.txt'; // 设置下载文件的名称
document.body.appendChild(a); // 必须将 a 元素添加到 DOM
a.click(); // 触发点击事件下载文件
document.body.removeChild(a); // 下载后移除元素
URL.revokeObjectURL(url); // 清理 URL 对象
}
Blob: 用于表示二进制数据。可用来生成从 JavaScript 生成的内容（如文本、图片等）的下载文件。URL.createObjectURL: 创建指向内存中 Blob 对象的 URL，使得浏览器可以将该 Blob 视为文件。download: 在 标签上设置下载文件的名称。
优点：
支持动态生成文件内容。可用于生成文本文件、CSV 文件、JSON 文件、图像等。不需要后端支持。
缺点：
适用于浏览器支持 Blob API 的环境。下载大文件时，可能会面临性能问题。
参考文档：
MDN - Blob MDN - URL.createObjectURL
3. 使用 JavaScript 通过 Fetch API 下载文件
当需要从服务器下载文件时，可以使用 JavaScript 的 fetch API 请求文件，并使用 response.blob() 获取文件内容，然后下载。
方法：
function fetchFileAndDownload() {
fetch('https://example.com/yourfile.txt')
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'downloaded-file.txt';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
})
.catch(error => console.error('下载文件失败:', error));
}
fetch: 用于从服务器请求文件。response.blob(): 将服务器响应转换为 Blob 对象。URL.createObjectURL: 创建一个指向 Blob 对象的 URL，供用户下载。
优点：
适用于从服务器获取文件并进行下载。可以处理大文件或其他动态生成的文件。易于与后台交互并获取实时数据。
缺点：
对于大文件，可能需要处理进度条或分片下载等。需要浏览器支持 fetch 和 Blob。
参考文档：
MDN - fetch API MDN - Blob
4. 通过后端接口实现文件下载
如果需要从服务器端获取动态生成的文件或涉及身份验证的情况，后端处理是必不可少的。浏览器通过发起 GET 或 POST 请求从服务器获取文件并触发下载。
方法：
// 假设有一个后台 API，可以生成文件并返回
fetch('/api/download-file')
.then(response => response.blob())
.then(blob => {
const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.href = url;
link.download = 'file-from-server.txt';
link.click();
URL.revokeObjectURL(url);
})
.catch(error => console.log('下载失败:', error));
后端示例（Node.js Express）:
app.get('/api/download-file', (req, res) => {
const filePath = '/path/to/file.txt';
res.download(filePath, 'downloaded-file.txt', (err) => {
if (err) {
res.status(500).send('文件下载失败');
}
});
});
优点：
后端可以动态生成文件并支持下载。支持更复杂的下载逻辑，如身份验证、文件权限等。适用于大文件或不适合存储在前端的文件。
缺点：
需要后端支持和开发。需要处理大文件的下载优化（例如分片下载）。
5. 使用 window.location 跳转到下载链接
如果文件是公开的，且用户只需要通过访问特定的 URL 即可下载文件，可以使用 window.location 来实现文件下载。
方法：
function triggerDownload() {
window.location.href = 'https://example.com/path/to/file.zip';
}
优点：
简单易用，适合静态文件或直接从 URL 下载的情况。不需要其他 API 或复杂的逻辑。
缺点：
无法控制文件名，文件会按照服务器上的原始文件名进行下载。适用于直接下载，不适用于需要动态处理的情况。
除了之前提到的几种常见的文件下载方法之外，还有一些其他方式可以用来实现文件下载。这里列出几种更为特殊或者不同的方案：
6. 使用 FileSaver.js 库下载文件
FileSaver.js 是一个 JavaScript 库，它能够帮助我们在浏览器中生成并下载文件。它简化了动态生成文件并触发下载的过程，特别是对于大文件或需要在浏览器内生成内容的应用。
方法：
首先，需要引入 FileSaver.js 库，可以通过 CDN 或者本地下载：
使用 FileSaver.js 下载文件：
function saveFile() {
const blob = new Blob(['Hello, World!'], { type: 'text/plain' });
saveAs(blob, 'hello-world.txt'); // 使用 FileSaver.js 库的 saveAs 方法
}
优点：
简化了文件下载的实现。兼容更多浏览器，尤其是在较老的浏览器中，它能提供额外的支持。支持多种文件类型，并且可以处理大文件。
缺点：
需要依赖第三方库。对于简单需求来说，可能有些过于复杂。
参考文档：
FileSaver.js GitHub
7. 通过 iframe 实现文件下载
通过使用隐藏的 iframe，你可以从后端服务器请求文件并进行下载。这种方式适合用于触发由服务器生成的文件下载，特别是当文件下载需要使用 POST 请求时。
方法：
function downloadFile() {
const iframe = document.createElement('iframe');
iframe.style.display = 'none'; // 隐藏 iframe
iframe.src = 'https://example.com/download-file'; // 后端返回文件的链接
document.body.appendChild(iframe); // 将 iframe 插入到 DOM 中
}
优点：
适用于需要使用 POST 请求并且无法直接使用 GET 请求的情况。可以处理更复杂的文件下载场景，如带有表单提交的文件下载。
缺点：
在现代浏览器中，iframe 的下载行为可能会受到限制（例如，弹出窗口拦截器的影响）。不能直接控制下载过程，用户看不到文件下载的进度。
参考文档：
MDN - HTML