使用JavaScript从Firebase导出数据为JSON并下载

我帮你搞定这个跨浏览器的JSON导出问题！你现在的代码在Firefox能用但其他浏览器不行，主要是因为data:text/json的兼容性限制，咱们来调整一下，同时修正代码里的小问题，让它在Chrome、Edge、Safari等主流浏览器都能正常工作。

首先，先看你现有代码里的两个小问题：

• 变量拼写错误：child(pacinte)应该是child(paciente)（估计是手滑打错了）
• 直接用data URL下载在部分浏览器里支持有限，尤其是处理稍大的数据时容易出问题

下面是修复并优化后的完整代码，完全符合你想要的导出格式：

$scope.exportarJSON = function (pacienteId) {
  // 从指定的patients节点下获取单个患者数据
  firebase.database().ref('pacientes/').child(pacienteId)
    .once('value')
    .then(function(snapshot) {
      const pacienteData = snapshot.val();
      // 按照你需要的格式包装数据：以节点ID为键的对象
      const exportJSON = {
        [pacienteId]: pacienteData
      };
      // 调用下载函数，第二个参数可以加null和2让JSON格式更美观
      download(`${pacienteId}.json`, JSON.stringify(exportJSON, null, 2));
    })
    .catch(function(error) {
      console.error('获取患者数据失败:', error);
      // 这里可以加用户提示，比如alert('导出失败，请稍后重试')
    });
};

function download(filename, text) {
  // 改用Blob对象处理，大幅提升跨浏览器兼容性
  const jsonBlob = new Blob([text], { type: 'application/json;charset=utf-8' });
  // 创建临时下载URL
  const downloadUrl = URL.createObjectURL(jsonBlob);
  
  const downloadLink = document.createElement('a');
  downloadLink.href = downloadUrl;
  downloadLink.download = filename;
  downloadLink.style.display = 'none';
  
  document.body.appendChild(downloadLink);
  downloadLink.click();
  
  // 清理临时URL，避免内存泄漏
  URL.revokeObjectURL(downloadUrl);
  document.body.removeChild(downloadLink);
}

关键优化点说明： #

1. 修正拼写错误：把笔误的pacinte改成了更清晰的pacienteId，避免找不到节点的问题
2. 符合目标导出格式：通过{ [pacienteId]: pacienteData }把数据包装成你需要的结构，导出的JSON和你给出的示例完全一致
3. 跨浏览器兼容：用Blob替代data:text/json的方式，这是目前所有主流浏览器都支持的可靠下载方案，还能处理更大体积的数据
4. 内存清理：调用URL.revokeObjectURL释放临时URL占用的内存，避免长期运行后出现内存泄漏
5. 美观的JSON格式：JSON.stringify的第二个和第三个参数（null, 2）会让导出的JSON有缩进，可读性更好（如果不需要可以去掉，不影响功能）

如果你需要导出整个patients/节点的所有数据，只需要去掉.child(pacienteId)这一行，直接获取snapshot.val()即可，代码调整如下：

firebase.database().ref('pacientes/')
  .once('value')
  .then(function(snapshot) {
    const allPatients = snapshot.val();
    download('所有患者数据.json', JSON.stringify(allPatients, null, 2));
  })

这样调整后，不管是哪个浏览器，都能正常导出并下载你需要的JSON文件啦！

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