在现代网页开发中，文件下载是一个常见的需求。JavaScript 提供了多种方法来实现文件的下载，以下是 14 种常用的方法和示例代码。
1. 使用 a 标签的 download 属性
<a href="path/to/file.txt" download="myfile.txt">下载文件</a>
这个方法是最简单的，创建一个带有 download 属性的链接，用户点击后文件就会开始下载。
2. 使用 Blob 和 URL.createObjectURL
const data = new Blob(['Hello World'], { type: 'text/plain' });
const url = URL.createObjectURL(data);
const a = document.createElement('a');
a.href = url;
a.download = 'hello.txt';
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(url);
使用 Blob 对象可以动态创建文件内容，并通过 URL.createObjectURL 生成文件下载链接。
3. Fetch API 结合 Blob
fetch('path/to/file.txt')
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'file.txt';
a.click();
URL.revokeObjectURL(url);
});
通过 Fetch API 获取文件，转换为 Blob，然后创建下载链接。
4. XMLHttpRequest 下载
const xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/file.txt', true);
xhr.responseType = 'blob';
xhr.onload = function () {
const url = URL.createObjectURL(xhr.response);
const a = document.createElement('a');
a.href = url;
a.download = 'file.txt';
a.click();
URL.revokeObjectURL(url);
};
xhr.send();
使用 XMLHttpRequest 下载文件，设置 responseType 为 blob。
5. 使用 Canvas 转换为图片文件
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'canvas.png';
a.click();
URL.revokeObjectURL(url);
});
可以将 Canvas 内容转换为 Blob，然后下载为图片文件。
6. 使用 PDF.js 生成 PDF 并下载
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.text('Hello world!', 10, 10);
doc.save('sample.pdf');
利用 jsPDF 库生成 PDF 文件并提供下载功能。
7. 生成 ZIP 文件并下载
const JSZip = window.JSZip;
const zip = new JSZip();
zip.file('file.txt', 'Hello World');
zip.generateAsync({ type: 'blob' }).then(content => {
const url = URL.createObjectURL(content);
const a = document.createElement('a');
a.href = url;
a.download = 'files.zip';
a.click();
URL.revokeObjectURL(url);
});
使用 JSZip 库可以将多个文件打包成 ZIP 文件，并实现下载。
8. 利用 FileSaver.js 保存 Blob
const blob = new Blob(['Hello World'], { type: 'text/plain' });
saveAs(blob, 'hello.txt');
使用 FileSaver.js 库简化文件保存和下载操作。
9. 通过 iframe 下载
<iframe id="download-iframe" style="display:none;"></iframe>
<script>
const download = (url) => {
const iframe = document.getElementById('download-iframe');
iframe.src = url;
}
download('path/to/file.txt');
</script>
利用隐形的 iframe 元素触发下载。
10. 复制到剪贴板
const text = 'Hello, World!';
navigator.clipboard.writeText(text).then(() => {
console.log('文本已复制到剪贴板!');
});
虽然不是真正的文件下载，但可以方便地将文本内容复制到剪贴板。
11. Blob URL 和 纯文本下载
const text = '这是一个下载的文本文件';
const blob = new Blob([text], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'textfile.txt';
a.click();
URL.revokeObjectURL(url);
将纯文本创建为 Blob 并下载。
12. 下载 JSON 文件
const jsonData = { name: "张三", age: 30 };
const blob = new Blob([JSON.stringify(jsonData, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'data.json';
a.click();
URL.revokeObjectURL(url);
通过 Blob 创建 JSON 文件并下载。
13. 通过 POST 方法下载文件
fetch('path/to/download', {
method: 'POST',
body: JSON.stringify({ data: 'some data' }),
headers: { 'Content-Type': 'application/json' }
})
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'file.txt';
a.click();
URL.revokeObjectURL(url);
});
通过 POST 请求获取文件后下载。
14. 下载 HTML 文件
const htmlContent = '<html><body><h1>Hello World</h1></body></html>';
const blob = new Blob([htmlContent], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'file.html';
a.click();
URL.revokeObjectURL(url);
以上是各种 JavaScript 文件下载的方法，每种方法都有其适用场景。在实际应用中，开发者可以根据需求选择合适的方式实现文件下载。
