Is it possible to have both "Save as Base64" option and Other "Save As" options together?

[MANISHA GHOSH]

I am particularly talking about this example here in the documentation: https://ej2.syncfusion.com/react/documentation/spreadsheet/open-save#save-data-as-a-base64-string

I want to be able to do both, save as Base64 string and access the normal "save as" menu as well. So when I am trying to implement the Base64 example, I have to write the beforeSave function in the following manner:

 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.

  };

But this prevents the file from, being downloaded in the conventional ways, i.e. these items don't work anymore:

Is there a way to keep both options? Thanks in advance.

[Deira Raj Rajkumar]

Hi MANISHA GHOSH,

We have reviewed your query and would like to inform you that this can be achieved by setting a Boolean flag to identify the type of save triggered and handling the beforeSave event accordingly.

For your convenience, we have prepared a sample for this case.

Sample link - Qtawo5xs (forked) - StackBlitz

Code snippet:

 

let isSaveAsbase64= false; 

 

    const beforeSave = (args) => {

 

      // To check if it triggered from normal save or base64 save

      if(isSaveAsbase64){

 

        args.needBlobData = true; // To trigger the saveComplete event.

        args.isFullPost = false; // Get the spreadsheet data as blob data in the saveComplete event.

        isSaveAsbase64= false; // Changing it to the default state

      }

      }

    

    const saveComplete = (args) => {

        // Convert blob data to base64 string.

        let reader = new FileReader();

        reader.readAsDataURL(args.blobData);

        reader.onloadend = function () {

          setBase64String(reader.result);

        };

      }

      const exportBtn = () => {

        let spreadsheet = spreadsheetRef.current;

        isSaveAsbase64= true;

          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.

      }

 

In the above sample, we have added a Boolean variable (isSaveAsBase64). When the 'Export as Base64' button is triggered, we set this variable to true. In the beforeSave event, we check the value of the variable. If it is true, we set args.needBlobData to true and args.isFullPost to false in order to retrieve the Base64 data. If the variable is not true, the save action proceeds normally.

Kindly check with the above details and feel free to contact us for further clarification.

[MANISHA GHOSH]

Thank you for your answer. I had one additional question. Is it possible to get the text content of a specific cell in the rendered spreadsheet? For example, if I want to get the content of the cell 'E1' on a button click, how would I go about writing the function?

Thanks again.

[Deira Raj Rajkumar]

Hi MANISHA GHOSH,

We have validated your query, and we would like to let you know that this can be done by using the getDisplayText method. By using the getDisplayText method we can get the formatted text of the cell.

For your convenience, we have prepared a sample for this case.

Sample link - Gm7zpybl (forked) - StackBlitz

Code Snippet:

//To get the address of selected cell

        let selectedCellAddress = spreadsheet.getActiveSheet().selectedRange;

        // To get the cell Indexes of the selected cell

        let cellIndexes = getCellIndexes(selectedCellAddress);

        // To get the cell modal

        const cell = getCell(

            cellIndexes[0],

            cellIndexes[1],

            spreadsheet.getActiveSheet()

        );

        // Using getDisplayText to get the text content of the selected cell

        console.log(spreadsheet.getDisplayText(cell));

 

In the above sample, we first use spreadsheet.getActiveSheet().selectedRange to get the selected cell address. Then, we use the getCellIndexes method to convert the address to row and column indexes. Using these, getCell retrieves the cell model. Finally, we use the getDisplayText() method to get the text content of the cell, which is logged to the console.

Kindly check with the above details, and feel free to reach out to us for further clarification.