Angular项目中如何将数组对象导出为JSON格式文件

不需要额外安装任何第三方npm包，直接借助浏览器原生API即可实现，比引入外部依赖更轻量、无版本兼容风险，适配所有Angular支持的现代浏览器。

核心实现代码 #

你可以把下面的通用方法写到公共工具服务或者需要用到导出功能的组件里，直接传入你已经存好的业务数组对象即可触发下载：

/**
 * 导出JSON格式文件
 * @param sourceData 已采集完成的业务数组/对象数据
 * @param fileName 导出的文件名，无需手动加.json后缀
 */
exportToJson(sourceData: unknown[], fileName: string = 'business-data'): void {
  // 将数据序列化为JSON字符串，传入缩进参数生成格式化内容，方便用户本地打开查看
  const jsonContent = JSON.stringify(sourceData, null, 2);
  // 生成对应MIME类型的Blob对象
  const jsonBlob = new Blob([jsonContent], { type: 'application/json' });
  // 生成临时资源访问地址
  const tempUrl = window.URL.createObjectURL(jsonBlob);
  // 创建临时a标签触发下载行为
  const downloadLink = document.createElement('a');
  downloadLink.href = tempUrl;
  downloadLink.download = `${fileName}.json`;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  // 清理临时DOM节点与内存占用
  document.body.removeChild(downloadLink);
  window.URL.revokeObjectURL(tempUrl);
}

适配注意事项 #

• 如果你的业务数据包含Date类型、自定义类实例等非JSON标准基础类型的值，需要在JSON.stringify的第二个replacer参数中自定义转换规则，避免出现格式不符合预期、实例属性丢失的问题。
• 如果你之前已经封装过CSV导出的下载逻辑，不需要重复写DOM操作代码，只需要把传入的内容替换为序列化后的JSON字符串、Blob MIME类型改为application/json、文件后缀改为.json即可复用原有逻辑。
• 导出超100MB的大数据集时，去掉JSON.stringify的第三个缩进参数，直接使用JSON.stringify(sourceData)即可减少30%左右的文件体积，降低内存占用。

内容的提问来源于stack exchange，提问作者Hammy