Spreadsheet is nnot opening blob data consistently

Hi I am trying to open a blob. But some times it opens and some times it says "Invalid format". Can someone please help

Below is my useEffect where I convert byte array to blob and feeding to spreadsheet component


useEffect(() => {
    if (bytes && spreadsheetRef.current) {
      let spreadsheet = spreadsheetRef.current;
      byteToExcelBlob(bytes, (blob) => {
        setTimeout(() => {
          let file = new File([blob], 'Sample.xlsx');
          debugger;
          spreadsheet.open({ file: file });
        }, 3000);
      });
    }
  }, [bytes]);


 <SpreadsheetComponent
        ref={spreadsheetRef}
        openUrl="https://services.syncfusion.com/react/production/api/spreadsheet/open"
    ></SpreadsheetComponent>


Can someone tell me why Spreadsheet component is behaving unpredictably. It opens the blob some times but fails at other times



1 Reply

DM Dinakar Manickam Syncfusion Team August 26, 2024 04:08 PM UTC

Hi DATTATHREYA K V,

We have checked your query along with the provided code snippet, but we did not find any reference to the byteToExcelBlob function. Therefore, we kindly request you to share the code snippet of this function from your end.

Additionally, we noticed a similar query in your ticket, regarding loading a byte array into the spreadsheet. Based on the code snippet provided in that ticket, we have prepared a sample where we first convert the base64 string data into a byte array. This byte array is then converted into a Blob, which is subsequently transformed into a File object. Finally, we open that file using the open method of our spreadsheet.

By following this procedure, the byte array should load correctly into the spreadsheet. For your convenience, we have attached the sample along with code snippet below for your reference.

Code Snippet:

   React.useEffect(() => {

        // Check if 'bytes' data and 'spreadsheetRef.current' are available

        if (bytes && spreadsheetRef.current) {

          if (!bytes) return;

          // Convert binary string to byte array

          var len = bytes.length;

          var buffer = new Array(len);

          for (var i = 0; i < len; i++) {

            buffer[i] = bytes.charCodeAt(i);

          }

          var view = new Uint8Array(buffer);

          // Create a Blob from the byte array

          const spreadsheet = spreadsheetRef.current;

          var testBlob = new Blob([view], {

            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',

          });

          // Create a File object from the Blob

          var file = new File([testBlob], 'test.xlsx');

   

          try {

            spreadsheet.open({ file: file });

          } catch (e) {

            console.error(e);

          }

        }


Sample Link
: Ctrpsh (forked) - StackBlitz

Kindly check the above details, and if we have misunderstood your query, then please provide the following details to help us validate and offer a more accurate solution quickly.

  • Please share the code snippet of the byteToExcelBlob function.
  • If you are encountering an issue with a specific file, kindly provide the details of that file.


Regards,
Dinakar M


Loader.
Up arrow icon