Next.js中Syncfusion Spreadsheet无法打开Excel文件求助

我参照Syncfusion官方的初始加载外部URL Excel文件示例实现代码，但无论是通过openUrl属性，还是组件ref调用open方法，都无法成功打开目标文件。相关代码如下：

import React from "react";
import { render } from "react-dom";
import "./styles.css";
import { SpreadsheetComponent } from "@syncfusion/ej2-react-spreadsheet";

const App = () => {
  const [spreadsheet, setSpreadsheet] = React.useState();

  return (
    <SpreadsheetComponent
      openUrl="https://js.syncfusion.com/demos/ejservices/data/Spreadsheet/LargeData.xlsx"
      ref={(comp) => {
        if (comp) {
          setSpreadsheet(comp);
        }
      }}
      allowOpen={true}
      created={() => {
        fetch(
          "https://js.syncfusion.com/demos/ejservices/data/Spreadsheet/LargeData.xlsx"
        ).then((response) => {
          response.blob().then((fileBlob) => {
            const file = new File([fileBlob], "Sample.xlsx");
            if (spreadsheet) {
              spreadsheet.open({ file: file }); // To open the excel file
            }
          });
        });
      }}
    ></SpreadsheetComponent>
  );
};

render(<App />, document.getElementById("root"));

问题原因及修复方案 #

1. openUrl属性的使用错误 #

openUrl不是直接填写Excel文件的URL，而是用于指定服务器端处理文件解析的接口地址。Spreadsheet会向该接口发送请求，由后端返回解析后的JSON格式数据，而非直接加载原始Excel文件。

2. created钩子中组件实例未就绪 #

React状态更新是异步的，created钩子触发时，spreadsheet状态可能还未完成更新，导致调用spreadsheet.open()时实例为undefined。

修复后的代码 #

import React, { useRef, useEffect } from "react";
import { render } from "react-dom";
import "./styles.css";
import { SpreadsheetComponent } from "@syncfusion/ej2-react-spreadsheet";

const App = () => {
  const spreadsheetRef = useRef(null);

  useEffect(() => {
    if (spreadsheetRef.current) {
      fetch("https://js.syncfusion.com/demos/ejservices/data/Spreadsheet/LargeData.xlsx")
        .then(response => response.blob())
        .then(fileBlob => {
          // 指定正确的Excel文件MIME类型
          const file = new File(
            [fileBlob], 
            "Sample.xlsx", 
            { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }
          );
          spreadsheetRef.current.open({ file });
        });
    }
  }, []);

  return (
    <SpreadsheetComponent
      ref={spreadsheetRef}
      allowOpen={true}
    ></SpreadsheetComponent>
  );
};

render(<App />, document.getElementById("root"));

关键调整说明 #

• 用useRef替代useState存储组件实例，避免异步状态更新导致的实例获取延迟
• 将文件加载逻辑移至useEffect中，确保组件实例已完全挂载
• 为File对象添加正确的MIME类型，帮助Spreadsheet识别文件格式
• 移除无效的openUrl配置

额外注意：如果目标文件存在跨域问题，需要确保服务器配置了CORS，允许当前域名访问该文件资源。

内容的提问来源于stack exchange，提问作者Taha Rehman Siddiqui