Spread Sheet as "Blob"

[Mike Harvey Ambait]

Hi Support!

Is there a way to save spreadsheet as blob?

because I want to send/upload to it to the server.

[Saranya Dhayalan]

Hi Mike, 

 

Thank you for contacting Syncfusion support 

 

Query: Is there a way to save spreadsheet as blob? 

 

We have checked your reported scenario, we can achieve this by using saveAsJson and openFromJson method in the button click event. You can get the spreadsheet data by using saveAsJSON. You can use this json and sent the json data to server. 

 

Client side 

 

Index.html 

 

<div> 

    <button class="e-btn" id="saveToServer">Save Back to Server</button> 

    <button class="e-btn" id="LoadFromDataBase">Load Data</button> 

    <label>File name:</label> 

    <input type="text" id="filename" value="Sample" placeholder="Specify file name"> 

</div> 

 

Index.ts 

 

document.getElementById('saveToServer').onclick = (): void => { 

            spreadsheet.saveAsJson().then(Json => (fetch('https://localhost:44376/Home/SaveFiletoDB', { 

                method: 'POST', // or 'PUT' 

                headers: { 

                    'Content-Type': 'application/json', 

                }, 

                body: JSON.stringify({ name: (document.getElementById("filename") as HTMLInputElement).value, JSONData: JSON.stringify((Json as any).jsonObject) }), 

            }) 

                .then((response) => response.json()) 

                .then((data) => { 

                    console.log(data); 

                }))) 

        } 

        document.getElementById('LoadFromDataBase').onclick = (): void => { 

            fetch('https://localhost:44376/Home/LoadFromDataBase', { 

                method: 'POST', // or 'PUT' 

                headers: { 

                    'Content-Type': 'application/json', 

                }, 

                body: JSON.stringify({ name: (document.getElementById("filename") as HTMLInputElement).value }), 

            }) 

                .then((response) => response.json()) 

                .then((data) => { 

                    spreadsheet.openFromJson({ file: data }); 

                }) 

        } 

 

 

Server side: 

 

    public IActionResult SaveFiletoDB([FromBody]SaveOptions saveSettings) 

        { 

            //Save JSON to database 

            SqlConnection sqlCon = new SqlConnection(connectionString); 

            sqlCon.Open(); 

            SqlCommand sqlComm = new SqlCommand("INSERT INTO [dbo].[SpreadsheetData]([filename], [data]) VALUES (@filename, @data)", sqlCon); 

            sqlComm.Parameters.AddWithValue("@filename", saveSettings.Name); 

            sqlComm.Parameters.AddWithValue("@data", saveSettings.JSONData); 

            sqlComm.ExecuteNonQuery(); 

            sqlCon.Close(); 

            return Content("Saved in Server"); 

        } 

 

 

 

        [HttpPost] 

        public string LoadFromDataBase([FromBody]FileOptions file) 

        { 

             

            OpenRequest open = new OpenRequest(); 

           //Load JSON from database 

            SqlConnection sqlCon = new SqlConnection(connectionString); 

            SqlCommand sqlComm = new SqlCommand("SELECT * FROM [dbo].[SpreadsheetData] WHERE [filename] = '" + file.Name + "'", sqlCon); 

            sqlCon.Open(); 

            SqlDataReader sqlDR = sqlComm.ExecuteReader(); 

            string JSONData = ""; 

            while (sqlDR.Read()) 

            { 

                JSONData = sqlDR.GetValue(1).ToString(); 

                open.File = JSONData; 

            } 

            sqlCon.Close(); 

            string data = JSONData ; 

            return data; // returning JSON data to spreadsheet control 

        } 

 

 

For your convenience we have prepared a sample. please find the below sample link: 

 

Client side sample link: https://stackblitz.com/edit/nkhtvu?file=index.ts 

 

Server side sample link: https://www.syncfusion.com/downloads/support/forum/154591/ze/WebApplication93014945021392778521 

 

Could you please check the above sample and get back to us if you need further assistance on this? 

 

Regards, 

Saranya D 

 

[Mike Harvey Ambait]

Hi Saranya!

Thank you for the reply. I'm using php on the server side

I don't want to save it also in the Database because i'm going to send it as an attachment on email.

[Saranya Dhayalan]

Hi Mike, 

 

We have checked your query, we have prepared a sample in php. Please find the below code snippet: 

 

Client side  

  

Index.php 

 

<div>  

    <button class="e-btn" id="saveToServer" onclick="saveToServer()">Save Back to Server</button>  

    <button class="e-btn" id="LoadFromDataBase" onclick="LoadFromDataBase()">Load Data</button>  

    <label>File name:</label>  

    <input type="text" id="filename" value="Sample" placeholder="Specify file name">  

</div>    

              <div id="Spreadsheet"></div>             

    <script type="text/javascript"> 

               

    var spreadsheet =  new ej.spreadsheet.Spreadsheet({ 

        sheets: [ 

            { 

                name: 'Car Sales Report', 

                

                rows: [ 

                    { 

                        index: 30, 

                        cells: [ 

                            { index: 4, value: 'Total Amount:', style: { fontWeight: 'bold', textAlign: 'right' } }, 

                            { formula: '=SUM(F2:F30)', style: { fontWeight: 'bold' } }, 

                        ] 

                    }], 

                columns: [ 

                    { width: 180 }, { width: 130 }, { width: 130 }, { width: 180 }, 

                    { width: 130 }, { width: 120 } 

                ] 

            } 

        ], 

        openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open', 

        saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', 

        created: function () { 

            // Applies cell and number formatting to specified range of the active sheet 

            spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1'); 

            spreadsheet.numberFormat('$#,##0.00', 'F2:F31'); 

        } 

    }); 

     

 

    spreadsheet.appendTo('#Spreadsheet'); 

    // console.log(e.result); 

 

     function saveToServer() {  

            spreadsheet.saveAsJson().then(Json => (fetch('https://localhost:44376/Home/SaveFiletoDB', {  

                method: 'POST', // or 'PUT'  

                headers: {  

                    'Content-Type': 'application/json',  

                },  

                body: JSON.stringify({ name: (document.getElementById("filename")).value, JSONData: JSON.stringify((Json).jsonObject) }),  

            })  

                .then((response) => response.json())  

                .then((data) => {  

                    console.log(data);  

                })))  

        }  

        function LoadFromDataBase() {  

            fetch('https://localhost:44376/Home/LoadFromDataBase', {  

                method: 'POST', // or 'PUT'  

                headers: {  

                    'Content-Type': 'application/json',  

                },  

                body: JSON.stringify({ name: (document.getElementById("filename")).value }),  

            })  

                .then((response) => response.json())  

                .then((data) => {  

                    spreadsheet.openFromJson({ file: data });  

                })  

        }  

    </script> 

  

Server side:  

  

    public IActionResult SaveFiletoDB([FromBody]SaveOptions saveSettings)  

        {  

            //Save JSON to database  

            SqlConnection sqlCon = new SqlConnection(connectionString);  

            sqlCon.Open();  

            SqlCommand sqlComm = new SqlCommand("INSERT INTO [dbo].[SpreadsheetData]([filename], [data]) VALUES (@filename, @data)", sqlCon);  

            sqlComm.Parameters.AddWithValue("@filename", saveSettings.Name);  

            sqlComm.Parameters.AddWithValue("@data", saveSettings.JSONData);  

            sqlComm.ExecuteNonQuery();  

            sqlCon.Close();  

            return Content("Saved in Server");  

        }  

  

  

  

        [HttpPost]  

        public string LoadFromDataBase([FromBody]FileOptions file)  

        {  

              

            OpenRequest open = new OpenRequest();  

           //Load JSON from database  

            SqlConnection sqlCon = new SqlConnection(connectionString);  

            SqlCommand sqlComm = new SqlCommand("SELECT * FROM [dbo].[SpreadsheetData] WHERE [filename] = '" + file.Name + "'", sqlCon);  

            sqlCon.Open();  

            SqlDataReader sqlDR = sqlComm.ExecuteReader();  

            string JSONData = "";  

            while (sqlDR.Read())  

            {  

                JSONData = sqlDR.GetValue(1).ToString();  

                open.File = JSONData;  

            }  

            sqlCon.Close();  

            string data = JSONData ;  

            return data; // returning JSON data to spreadsheet control  

        }  

  

  

For your convenience we have prepared a sample. please find the below sample link:  

  

Client side sample link: https://www.syncfusion.com/downloads/support/forum/154591/ze/index911938481 

 

 Server side sample link: https://www.syncfusion.com/downloads/support/forum/154591/ze/WebApplication93014945021392778521 

  

Could you please check the above sample and get back to us if you need further assistance on this?  

  

Regards,  

Saranya D