如何从OneDrive Excel文件实时更新JSON数组？

我正在开发一个基于OneDrive Excel文件输入数据更新网页的React项目。目前本地React项目将public文件夹中的CSV文件转换为JSON，但无法实时更新。
我尝试通过Power Automate流程将Excel文件转换为CSV并存储到本地桌面以实现实时更新，但Power Automate无法存储到本地，因此改为每分钟将Excel转换为CSV并存储在OneDrive中。但React项目无法引用src文件夹外的该文件。

当前App.js代码：

import React from "react";
import Papa from "papaparse";
import "C:/Users/isaacl5/ReactProjects/my-app/src/App.css";

export default function App() {
 const [rows, setRows] = React.useState([]);

 React.useEffect(() => {
   async function getData() {
     const response = await fetch("/output.csv");
     console.log(response);
     const reader = response.body.getReader();
     const result = await reader.read(); // raw array
     const decoder = new TextDecoder("utf-8");
     const csv = decoder.decode(result.value); // the csv text
     console.log(csv);
     const results = Papa.parse(csv, { header: true }); // object with { data, errors, meta }
     const rows = results.data; // array of objects
     setRows(rows);
   }
   getData();
 }, []); // [] means just do this once, after initial render
 return (
   <div>
     {rows.map((row) => {
       return (
         <div key={row.id} class={row.location}>
           <h2>{row.location}</h2>
         </div>
       );
     })}
   </div>
 );
}

转换后的CSV内容：

Project,Location,StartDayandHour,EndDayandHour,UtilityA,UtilityB,UtilityC
Air Compressor,Compressor room 2,45140,45140.3333333333,Y,N,N
LGV Aisle,LGV lane,45140.25,45143.7083333333,N,Y,N

我希望能直接从OneDrive获取CSV文件（比如fetch("OneDrive CSV链接")），请问：

1. Microsoft Graph Toolkit是否支持直接将Excel或CSV数据拉取到网页并转换为JSON对象？
2. 若不支持，是否可将CSV下载到本地并引用？这能否实现实时更新？

我是该工具包新手，希望得到具体或宽泛的指导。

一、Microsoft Graph Toolkit完全支持直接拉取OneDrive中的Excel/CSV数据 #

Microsoft Graph Toolkit（MGT）可以通过Microsoft Graph API访问OneDrive文件，直接获取CSV内容并转换为JSON，完全满足你的实时更新需求。具体步骤如下：

1. 安装MGT依赖 #

在React项目中执行命令安装MGT相关包：

npm install @microsoft/mgt-react @microsoft/mgt-element

2. 配置身份验证 #

需要先在Azure门户完成应用注册（获取客户端ID），因为访问OneDrive需要用户授权。在项目入口文件（如index.js）中初始化MGT：

import { Providers, MsalProvider } from '@microsoft/mgt-react';

Providers.globalProvider = new MsalProvider({
  clientId: '你的Azure AD客户端ID', // 从Azure应用注册页面获取
  scopes: ['Files.Read', 'User.Read'] // 访问OneDrive文件的必要权限
});

3. 在React组件中获取OneDrive CSV数据 #

修改你的App.js，结合MGT的useGraph钩子获取文件内容，搭配PapaParse转换为JSON，并实现定时刷新：

import React, { useState, useEffect } from "react";
import Papa from "papaparse";
import { Login, useGraph } from '@microsoft/mgt-react';
import "./App.css";

export default function App() {
 const [rows, setRows] = useState([]);
 const graph = useGraph();

 // 获取OneDrive中CSV数据的函数
 async function fetchOneDriveCsv() {
   try {
     // 替换为你的CSV文件ID（可通过Graph Explorer查询获取）
     const fileId = '目标CSV文件的ID';
     // 调用Graph API获取文件文本内容
     const response = await graph.api(`/me/drive/items/${fileId}/content`).get();
     // 解析CSV为JSON对象
     const results = Papa.parse(response, { header: true });
     setRows(results.data);
   } catch (err) {
     console.error('获取文件失败:', err);
   }
 }

 // 组件挂载后首次加载，之后每分钟刷新一次（匹配Power Automate的更新频率）
 useEffect(() => {
   fetchOneDriveCsv();
   const interval = setInterval(fetchOneDriveCsv, 60000);

   return () => clearInterval(interval); // 组件卸载时清除定时器
 }, [graph]);

 return (
   <div>
     {/* 登录组件：用户登录后才能访问OneDrive资源 */}
     <Login />
     {rows.length > 0 ? (
       rows.map((row) => (
         <div key={row.Project} className={row.Location}>
           <h2>{row.Location}</h2>
           <p>项目: {row.Project}</p>
           <p>时间范围: {row.StartDayandHour} - {row.EndDayandHour}</p>
         </div>
       ))
     ) : (
       <p>加载中...</p>
     )}
   </div>
 );
}

关键细节说明 #

• 文件ID获取：通过Graph Explorer登录后，调用GET /me/drive/root/children接口，找到目标CSV文件并复制其id字段。
• 权限配置：Azure应用注册时需添加Files.Read委托权限，并完成管理员同意操作，否则无法正常访问OneDrive文件。
• 实时更新逻辑：通过setInterval定时调用API，和Power Automate的更新频率保持一致，即可实现数据同步更新。

二、关于“下载到本地并引用”的方案 #

浏览器出于安全限制，不允许前端JavaScript直接访问本地文件系统路径（如C:/Users/...），因此无法直接引用本地下载的CSV文件。即使通过浏览器下载，也需要用户手动上传，无法自动实现实时更新，该方案不可行。

新手入门提示 #

作为MGT新手，建议优先熟悉以下内容：

• MGT核心组件（如Login、File）的基础用法
• Microsoft Graph API中OneDrive文件相关的端点规则
• Azure AD应用注册的基本流程与权限配置逻辑

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