syncfusion spreadsheet wont open excel file in nextjs

Question

I am not sure what I am missign but here is the codesandbox link using the exact same code as in the sample here (Open an external URL excel file while initial load). The file neither opens with openUrl nor using the component reference in 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"));

score 0 · Answer 1 · edited Mar 29 '23 at 11:26

Upon verifying your provided CodeSandbox sample, we noticed that you had provided the file load URL on the openURL.

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

On the open URL, you must provide the server-side action URL, not the file load URL. With the server-side action URL, we make a call to the XLSIO engine and perform the import action.

You must provide the file load URL only on the fetch method, not on the open method. We have modified the sample and attached it below for your reference.

Sample Link: CodeSandbox

Also attached are the API links for reference.

syncfusion spreadsheet wont open excel file in nextjs

1 Answers1