Save and open Spreadsheet data as a Base64 string in React Spreadsheet component

In the Spreadsheet component, there is currently no direct option to save and open data as a Base64 string. You can achieve this by saving the Spreadsheet data as blob data and then converting that saved blob data to a Base64 string using FileReader.

You can get the Spreadsheet data as blob in the saveComplete event when you set the needBlobData as true and isFullPost as false in the beforeSave event.

The following code example shows how to save and open the spreadsheet data as base64 string.

app.jsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
function App() {
  const spreadsheetRef = React.useRef(null);
  const [base64String, setBase64String] = React.useState('');
    const beforeSave = (args) => {
        args.needBlobData = true; // To trigger the saveComplete event.
        args.isFullPost = false; // Get the spreadsheet data as blob data in the saveComplete event.
      }
    
    const saveComplete = (args) => {
        // Convert blob data to base64 string.
        let reader = new FileReader();
        reader.readAsDataURL(args.blobData);
        reader.onloadend = function () {
          setBase64String(reader.result);
        };
      }
    const importBtn = () => {
      let spreadsheet = spreadsheetRef.current;
        fetch(base64String)
            .then((response) => response.blob())
            .then((fileBlob) => {
                let file = new File([fileBlob], 'Sample.xlsx');
                spreadsheet.open({ file: file });
            });
    }
    const exportBtn = () => {
      let spreadsheet = spreadsheetRef.current;
        spreadsheet.save({
            url: 'https://services.syncfusion.com/react/production/api/spreadsheet/save',
            fileName: 'Worksheet',
            saveType: 'Xlsx',
          }); // Specifies the save URL, file name, file type need to be saved.
          // Logs base64 string into the console.
          console.log('Base64 String - ', base64String);
    }
  return (
    <div className='control-section spreadsheet-control'>
            <button className="e-btn custom-btn" onClick={importBtn}>Import Base64</button>
            <button className="e-btn custom-btn" onClick={exportBtn}>Export as Base64</button>
                <SpreadsheetComponent openUrl='https://services.syncfusion.com/react/production/api/spreadsheet/open'  ref={spreadsheetRef} beforeSave={beforeSave} saveComplete={saveComplete} >
                    <SheetsDirective>
                        <SheetDirective name="Car Sales Report">
                            <RangesDirective>
                                <RangeDirective dataSource={data}></RangeDirective>
                            </RangesDirective>
                            <ColumnsDirective>
                                <ColumnDirective width={180}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={180}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={120}></ColumnDirective>
                            </ColumnsDirective>
                        </SheetDirective>
                    </SheetsDirective>
                </SpreadsheetComponent>
            </div>
  );
}

export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);

app.tsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective, SaveCompleteEventArgs, BeforeSaveEventArgs } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
function App() {
  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
  const [base64String, setBase64String] = React.useState<string>('')
    const beforeSave = (args: BeforeSaveEventArgs): void => {
        args.needBlobData = true; // To trigger the saveComplete event.
        args.isFullPost = false; // Get the spreadsheet data as blob data in the saveComplete event.
      }
    
    const saveComplete = (args: SaveCompleteEventArgs): void => {
        // Convert blob data to base64 string.
        let reader: FileReader = new FileReader();
        reader.readAsDataURL(args.blobData);
        reader.onloadend = function () {
          setBase64String(reader.result);
        };
      }
    const importBtn = (): void => {
      let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
        fetch(base64String)
            .then((response) => response.blob())
            .then((fileBlob) => {
                let file: File = new File([fileBlob], 'Sample.xlsx');
                spreadsheet.open({ file: file });
            });
    }
    const exportBtn = (): void => {
      let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
        spreadsheet.save({
            url: 'https://services.syncfusion.com/react/production/api/spreadsheet/save',
            fileName: 'Worksheet',
            saveType: 'Xlsx',
          }); // Specifies the save URL, file name, file type need to be saved.
          // Logs base64 string into the console.
          console.log('Base64 String - ', base64String);
    }
  return (
    <div className='control-section spreadsheet-control'>
            <button className="e-btn custom-btn" onClick={importBtn}>Import Base64</button>
            <button className="e-btn custom-btn" onClick={exportBtn}>Export as Base64</button>
                <SpreadsheetComponent openUrl='https://services.syncfusion.com/react/production/api/spreadsheet/open'  ref={spreadsheetRef} beforeSave={beforeSave} saveComplete={saveComplete} >
                    <SheetsDirective>
                        <SheetDirective name="Car Sales Report">
                            <RangesDirective>
                                <RangeDirective dataSource={data}></RangeDirective>
                            </RangesDirective>
                            <ColumnsDirective>
                                <ColumnDirective width={180}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={180}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={120}></ColumnDirective>
                            </ColumnsDirective>
                        </SheetDirective>
                    </SheetsDirective>
                </SpreadsheetComponent>
            </div>
  );
}

export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);