syncfusion 电子表格无法在 nextjs 中打开 excel 文件

Question

我不确定我错了什么，但这里是 codesandbox 链接 使用与这里的 示例完全相同的代码 （在初始加载时打开外部 URL excel 文件）。该文件既不使用 openUrl 打开，也不使用 ref.

中的组件引用

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"));

Answer 1

在验证您提供的代码沙箱示例后，我们注意到您在 openURL 上提供了文件加载 URL。

openUrl="https://js.syncfusion.com/demos/ejservices/data/Spreadsheet/LargeData.xlsx"

在打开的URL 中，您必须提供服务器端操作URL，而不是文件加载URL。使用服务器端操作 URL，我们调用 XLSIO 引擎并执行导入操作。

您必须仅在 fetch 方法中提供文件加载 URL，而不是在 open 方法中。我们已经修改了示例并附在下面供您参考。

示例链接：https://codesandbox.io/s/next-js-forked-mxijnl?file=/index.js

还附上API链接供参考。

https://ej2.syncfusion.com/react/documentation/spreadsheet/open-save#open-an-external-url-excel-file-while-initial-load

https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#open

https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#openurl