如何将 JSON 数据转化为文件并下载？

实现 JSON 数据转化为文件并下载的核心步骤如下（代码基于原生 JavaScript）：

核心方案（两种通用方式）：

1. Data URL 方式

  function downloadByDataURL(jsonData, fileName = "data.json") {
    const jsonStr = JSON.stringify(jsonData, null, 2);
    const dataURI = `data:,${encodeURIComponent(jsonStr)}`; // 创建可下载的 URL 链接
    
    const link = document.createElement('a');
    link.download = fileName;
    link.href = dataURI;
    link.click(); // 自动销毁临时 DOM 元素
  }

1. Blob + Object URL 方式（推荐生产使用）

  function downloadByBlob(jsonData, fileName = "data.json") {
    const jsonStr = JSON.stringify(jsonData, null, 2);
    
    // 处理超大文本时安全推荐做法：
    const blob = new Blob([jsonStr], {
      type: "application/json;charset=utf-8"
    });
    
    const blobUrl = URL.createObjectURL(blob); // 创建安全的临时链接
    
    try {
      const tempLink = document.createElement('a');
      tempLink.download = fileName;
      tempLink.href = blobUrl;
      tempLink.style.display = 'none';
      document.body.appendChild(tempLink);
      tempLink.click();
    } finally {
      setTimeout(() => {
        URL.revokeObjectURL(blobUrl); // 清理内存释放安全资源
        document.body.removeChild(tempLink);
      }, 100);
    }
  }

最佳实践建议：

• 跨浏览器优化：优先使用 Blob 对象处理避免 Safari、Opera 等浏览器兼容问题
• 文件名规范：添加文件扩展名检测（如 if(!fileName.endsWith('.json')) fileName += '.json') 提升用户体验
• 安全校验：生产环境中检查 Blob 大小，超过浏览器安全限制时采用分块下载策略

使用示例：

const myData = { name: "示例", value: 100 };
downloadByBlob(myData);  // 默认存储为 data.json  
downloadByDataURL(myData, "自定义.json");