JavaScript实现客户端文件生成与下载指南

/**
 * 下载文本文件到用户本地
 * @param {string} filename - 下载文件的名称，例如 "my_document.txt"
 * @param {string} textContent - 文件的文本内容
 */
function downloadTextFile(filename, textContent) {
  // 1. 创建一个临时的 <a> 元素
  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按钮触发：
// <button onclick="downloadTextFile('sample.txt', '这是通过按钮下载的文本内容。')">点击下载文本文件</button>

/**
 * 通过 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. 创建临时的 <a> 元素
  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