一、利用 data: URI 实现简单文件下载
data: uri 方案适用于生成较小、内容可直接编码的文本文件。它允许开发者将文件内容直接嵌入到 url 中，作为 标签的 href 属性值。这种方法无需服务器交互，完全在客户端完成。
核心原理：
- 创建一个临时的 元素。
- 设置其 href 属性为 data: URI，格式为 data:[
][;base64],。 - 设置 download 属性，指定下载的文件名。
- 将元素添加到 DOM 中（通常是 body），使其可被点击。
- 模拟点击该元素，触发下载。
- 下载完成后，移除该临时元素。
示例代码：
/**
* 下载文本文件到用户本地
* @param {string} filename - 下载文件的名称，例如 "my_document.txt"
* @param {string} textContent - 文件的文本内容
*/
function downloadTextFile(filename, textContent) {
// 1. 创建一个临时的 元素
const element = document.createElement('a');
// 2. 设置 href 属性为 data: URI
// 建议使用 encodeURIComponent 来编码文件内容，确保特殊字符正确处理
// data:text/plain;charset=utf-8 更适合文本文件下载，确保字符编码正确
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(textContent));
// 3. 设置 download 属性，指定下载的文件名
// 浏览器会根据此属性触发下载，而不是打开内容
element.setAttribute('download', filename);
// 4. 将元素设置为不可见并添加到 DOM 中
// 这样可以避免在页面上显示不必要的元素，并确保元素在DOM中可被点击
element.style.display = 'none';
document.body.appendChild(element);
// 5. 模拟点击该元素，触发下载
element.click();
// 6. 下载完成后，移除该临时元素
// 延迟移除可以确保在某些浏览器中下载流程有足够时间启动
setTimeout(() => {
document.body.removeChild(element);
}, 0); // 少量延迟，确保浏览器开始下载
}
// 使用示例：
// 在控制台尝试：
// downloadTextFile('hello.txt', 'Hello, JavaScript Download!');
// downloadTextFile('report.csv', 'Name,Age\nAlice,30\nBob,25');
// 结合HTML按钮触发：
// 注意事项：
- mediatype (MIME 类型): data:text/plain 或 data:application/octet-stream 更通用，能更好地指示浏览器下载文件。data:text/html 可能会导致浏览器尝试渲染内容而非下载，这可能是导致下载不稳定的原因之一。
- 编码: 使用 encodeURIComponent() 对文件内容进行编码至关重要，它能正确处理所有特殊字符（如空格、中文、符号等），防止 URI 结构损坏。而 encodeURI() 适用于完整的 URI，不适用于 URI 的组成部分（如 data: URI 的数据部分）。
- URI 长度限制: 浏览器对 data: URI 的长度有上限（通常为几兆字节），因此此方法不适合下载大型文件。
二、利用 Blob 对象实现更灵活的文件下载
对于二进制数据（如图片、PDF）或大型文本文件，Blob 对象是更优的选择。Blob（Binary Large Object）代表了不可变的原始数据。它允许我们以编程方式创建文件，并利用 URL.createObjectURL() 生成一个临时 URL。
立即学习“Java免费学习笔记（深入）
”；核心原理：
- 创建 Blob 对象，将文件内容（可以是字符串、ArrayBuffer 等）和 MIME 类型传递给它。
- 使用 URL.createObjectURL() 方法为 Blob 对象创建一个临时的 URL。这个 URL 是一个特殊的本地 URL，指向浏览器内存中的 Blob 数据。
- 将此临时 URL 设置为 元素的 href 属性。
- 设置 download 属性，指定下载的文件名。
- 模拟点击并移除元素。
- 重要： 在下载完成后或不再需要该 URL 时，调用 URL.revokeObjectURL() 释放内存。
示例代码：
/**
* 通过 Blob 对象下载文件
* @param {string} filename - 下载文件的名称
* @param {BlobPart} content - 文件内容，可以是字符串、ArrayBuffer、Blob等
* @param {string} mimeType - 文件的MIME类型，例如 "text/plain", "image/png", "application/json"
*/
function downloadFileFromBlob(filename, content, mimeType) {
// 1. 创建 Blob 对象
// content 必须是一个数组，即使只有一个内容项
const blob = new Blob([content], { type: mimeType });
// 2. 使用 URL.createObjectURL() 为 Blob 对象创建临时 URL
const url = URL.createObjectURL(blob);
// 3. 创建临时的 元素
const element = document.createElement('a');
element.setAttribute('href', url);
element.setAttribute('download', filename);
element.style.display = 'none'; // 隐藏元素
document.body.appendChild(element);
// 4. 模拟点击并触发下载
element.click();
// 5. 下载完成后，移除元素并释放 URL 资源
// 延迟释放可以确保在某些浏览器中下载流程有足够时间启动
setTimeout(() => {
document.body.removeChild(element);
URL.revokeObjectURL(url); // 释放内存资源，非常重要！
}, 100); // 少量延迟，确保浏览器开始下载
}
// 使用示例：
// 下载文本文件 (与 data: URI 类似，但更灵活)
// downloadFileFromBlob('my_document.txt', 'Hello from Blob!', 'text/plain');
// 下载 JSON 文件
// const jsonData = { name: "Alice", age: 30, city: "New York" };
// downloadFileFromBlob('data.json', JSON.stringify(jsonData, null, 2), 'application/json');
// 下载 CSV 文件
// const csvContent = "Header1,Header2\nValueA,ValueB\nValueX,ValueY";
// downloadFileFromBlob('data.csv', csvContent, 'text/csv');
// 下载图片（假设你有一个Canvas元素，可以获取其Blob）
/*
// 假设 canvas 是一个已经绘制内容的 HTMLCanvasElement 
