如何使用 JavaScript 动态生成并下载文件-js教程-PHP中文网

javascript可在浏览器中直接生成文件并下载，无需后端：先构造内容创建blob，再用url.createobjecturl生成临时链接，通过模拟点击标签触发下载，并建议调用revokeobjecturl释放内存。

如何使用 javascript 动态生成并下载文件

JavaScript 可以在浏览器中直接生成文件内容并触发下载，无需后端参与。核心思路是：构造文件数据 → 创建 Blob 对象 → 生成临时 URL → 模拟点击下载链接。

构造内容并创建 Blob

Blob（Binary Large Object）用于表示不可变的原始二进制数据，是生成文件的基础。文本类文件（如 .txt、.csv、.json）可直接用字符串构造；其他类型（如图片、PDF）需配合 ArrayBuffer 或 TypedArray。

纯文本文件：用 new Blob([content], { type: 'text/plain' })
JSON 文件：先 JSON.stringify(obj)，再传入 Blob
CSV 文件：拼接字符串，注意换行用 \n，字段用逗号分隔，必要时加引号包裹含逗号的字段

生成并触发下载链接

通过 URL.createObjectURL() 获取 Blob 的临时地址，再创建一个隐藏的标签模拟点击。

设置 download 属性指定文件名（如 data.csv），否则浏览器可能用随机名或不触发下载
必须调用 .click()，且不能在异步回调外提前释放 Blob URL（否则链接失效）
下载完成后建议调用 URL.revokeObjectURL(url) 释放内存，尤其在频繁操作时

常见格式示例

导出 CSV：

java-enterprise

Java企业开发专家，专注于Spring Boot、微服务架构和JVM优化。适用于：Java语言掌握、

下载

function downloadCSV(data, filename = 'data.csv') {
  const csvContent = 'data:text/csv;charset=utf-8,' 
    + data.map(row => row.map(cell => `"${cell}"`).join(',')).join('\n');
  const encodedUri = encodeURI(csvContent);
  const link = document.createElement('a');
  link.setAttribute('href', encodedUri);
  link.setAttribute('download', filename);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

导出 JSON：

function downloadJSON(obj, filename = 'data.json') {
  const content = JSON.stringify(obj, null, 2);
  const blob = new Blob([content], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}