CODEWITHSUNDEEP
next.jssyncfusionej2-syncfusion
Taha Rehman Siddiqui
Taha Rehman Siddiqui

Reputation: 2533

syncfusion spreadsheet wont open excel file in nextjs

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

Upvotes: 2

Views: 377

Answers (1)

Vasanth R
Vasanth R

Reputation: 11

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.

Upvotes: 0

Related Questions