get whole data of workbook as a xlsx or xls file

[Bách Nguy?n]

Using ej2-react-spreadsheet, i added a new toolbarItem to save data to server. So I need to get the whole data of workbook as an "xls" or "xlsx" file, somethings like documentEditor.saveAsBlob("Docx") ​ ​could help. I have read many posts but never found a solution. Please advise how to achieve this in Syncfusion

[Babu Periyasamy]

Hi Bách Nguy?n,

We have checked your reported query. And based on your reported query, we suspect that you want the Spreadsheet data as a blobData on a toolbar click. And it can be achieved by calling the save method in a toolbar click and setting the args.needBlobData to true and args.isFullPost to false in the beforeSave event to trigger the saveComplete event and get the Spreadsheet data as blob in the saveComplete event respectively. And you can upload this blobData to required server based on your need. For your convenience, we have prepared the sample and attached below along with the code snippets and video demonstration for your reference,

Code snippet:

const onCreated = () => {

        spreadsheet.addToolbarItems("Home", [

            { type: "Separator" },

            { text: "Save", tooltipText: "Save", prefixIcon: "e-de-ctnr-lock", click: () => { spreadsheet.save(); } },

        ]);

    }

    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) => {

         //This blob can be uploaded to your required server, database, or file path.

        console.log(args.blobData);

    }

Sample link: https://stackblitz.com/edit/react-ifjpet-vc8p9j?file=index.js

Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Get_Blob_data-1385091229

For more information, please refer the below documentation link,

https://ej2.syncfusion.com/react/documentation/spreadsheet/open-save

Kindly, check the above information and get back to us for further validation.

[Bách Nguy?n]

Thank you so much for your support, it works just as I wanted. But what if i still want user to be able to download the file. As i can see, these are overwriting the default download event

[Janakiraman Sakthivel]

Hi Bách Nguy?n,

We have validated your reported query. We have shared the solution for both Default File->Save AS option and Custom Save Button on Toolbar with Click action also.

Regarding Default File->Save As action to download File:

When you configure the needBlobData & isFullPost in the beforeSave event then file will not download when you perform save action via Default File Save action. So that, currently, we used private variable to skip this property assign on the Default File Save action.

For your reference, we have shared the code snippets and the modified sample below to achieve your requirements.

Sample: https://stackblitz.com/edit/react-ifjpet-wfxrbx?file=index.js

CODE SNIPPET:

let savedAsBlob = false;
const onCreated = () => {

        spreadsheet.addToolbarItems("Home", [

            { type: "Separator" },

            { text: "Save", tooltipText: "Save", prefixIcon: "e-de-ctnr-lock", click: () => { savedAsBlob = true; spreadsheet.save(); } },

        ]);

    }

const beforeSave = (args) => {

        if (savedAsBlob) {

            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) => {

        //This blob can be uploaded to your required server, database, or file path.

        console.log(args.blobData);

        savedAsBlob = false;

    }

Regarding Download File with Custom Save Button:

If you would like to save the spreadsheet data as BlobData and also save it as an MS Excel file both in the same action while clicking the button in the toolbar, you can achieve this by converting the received BlobData in the saveComplete event to an MS Excel file, as shown in the below shared code snippets.

For your reference, we have shared the code snippets and the modified sample below to achieve your requirements.

Sample: https://stackblitz.com/edit/react-ifjpet-c5xbwe?file=index.js

CODE SNIPPET:

let savedAsBlob = false;
const onCreated = () => {

        spreadsheet.addToolbarItems("Home", [

            { type: "Separator" },

            { text: "Save", tooltipText: "Save", prefixIcon: "e-de-ctnr-lock", click: () => { savedAsBlob = true; spreadsheet.save(); } },

        ]);

    }

const beforeSave = (args) => {

        if (savedAsBlob) {

            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) => {

        //This blob can be uploaded to your required server, database, or file path.

        console.log(args.blobData);

        savedAsBlob = false;

       // Saves the Spreadsheet data to Excel file.

       saveExcel(blobData);

    }

    const saveExcel = (blobData) => {

        let anchor = document.createElement('a');

        const url = URL.createObjectURL(blobData);

        anchor.rel='nofollow' href = url;

        anchor.download = 'Sample.xlsx';

        document.body.appendChild(anchor);

        anchor.click();

        URL.revokeObjectURL(url);

        document.body.removeChild(anchor);

    }

Please get back to us if you need any further clarifications.

[Bách Nguy?n]

So simple that I haven't thought a bout it. Appreciate your help.

[Janakiraman Sakthivel]

Hi Bách Nguy?n,

We're glad your issue was resolved. Please get back to us for further assistance in the future.