Angular 8如何将Excel转换得到的JSON文件上传至Firebase Realtime Database

第一步：前置Firebase配置 #

先完成基础准备工作：

• 安装Firebase SDK：npm项目执行命令 npm install firebase
• 在应用的初始化文件中配置Firebase连接信息，参考代码：

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

const firebaseConfig = {
  // 替换为Firebase控制台中你自己项目的配置参数
  apiKey: "你的apiKey",
  authDomain: "你的authDomain",
  databaseURL: "你的实时数据库地址",
  projectId: "你的projectId",
  storageBucket: "你的storageBucket",
  messagingSenderId: "你的messagingSenderId",
  appId: "你的appId"
};

// 初始化Firebase
const app = initializeApp(firebaseConfig);
// 导出数据库实例供业务代码调用
export const db = getDatabase(app);

测试阶段可以临时将实时数据库的权限规则放开，生产环境务必补充权限控制，临时测试规则参考：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

第二步：修改现有代码添加上传逻辑 #

你原有代码已经拿到了完整的结构化jsonData对象，无需转成JSON字符串可以直接写入Firebase，修改后的完整代码如下：

// 顶部先导入依赖
import { ref, set } from "firebase/database";
import { db } from "替换为你之前初始化Firebase的文件路径";

onFileChange(ev) {
  let workBook = null;
  let jsonData = null;
  const reader = new FileReader();
  const file = ev.target.files[0];
  reader.onload = async (event) => {
    const data = reader.result;
    workBook = XLSX.read(data, { type: 'binary' });

    jsonData = workBook.SheetNames.reduce((initial, name) => {
      const sheet = workBook.Sheets[name];
      initial[name] = XLSX.utils.sheet_to_json(sheet);
      return initial;
    }, {});
    
    // 新增：上传到Firebase实时数据库逻辑
    try {
      // 可自定义数据存储的节点路径，示例存储在excel_import/时间戳节点下避免覆盖
      const uploadRef = ref(db, `excel_import/${Date.now()}`);
      await set(uploadRef, jsonData);
      console.log("数据上传成功");
      // 此处可自行添加成功提示、状态重置等业务逻辑
    } catch (error) {
      console.error("数据上传失败：", error);
      // 此处可自行添加失败提示、错误处理等业务逻辑
    }

    const dataString = JSON.stringify(jsonData);
    document.getElementById('output').innerHTML = dataString.slice(0, 300).concat('...');
    this.setDownload(dataString);
  };
  reader.readAsBinaryString(file);
}


setDownload(data) {
  this.willDownload = true;
  setTimeout(() => {
    const el = document.querySelector('#download');
    el.setAttribute('href', `data:text/json;charset=utf-8,${encodeURIComponent(data)}`);
    el.setAttribute('download', 'xlsxtojson.json');
  }, 1000);
}

如果你使用的是8.x及更早版本的Firebase Web SDK，写入逻辑需调整为对应版本的链式调用写法即可。

可选优化点 #

• 如果需要覆盖固定节点的数据，直接把存储路径中的excel_import/${Date.now()}修改为你需要的固定路径即可，比如excel_data/latest
• 若Excel文件体积较大，可以补充加载状态提示，避免用户重复触发上传
• 生产环境务必给实时数据库补充权限校验规则，比如限制只有登录用户才能写入数据

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