Programmatically Saving Syncfusion Spreadsheet To the server in Vue.js

Question

Hi, I'm trying to save a spreadsheet programmatically. I've already set up 
my Node.js routes using `multer` to save files to my server. Could you 
please provide guidance on how to achieve this?

I want the following:A custom function to launch the save event programmatically.To send the file to my own server.

Babu Periyasamy · Accepted Answer

Hi Bilal,JSON data to xlsx file:We have checked your reported query of converting the
JSONData of Spreadsheet to xlsx file in the backend.In our backend API, we are using the Syncfusion.EJ2.Spreadsheet.AspNet.Core
NuGet package with its dependencies. Within this package, we utilize our Syncfusion
XLSIO library internally to convert the JSON data of the spreadsheet to
Excel file, which we send via formData from client side. The formData
is passed into the Workbook.Save() method on our server-side, which
converts the JSON data into a excel file and sends it to the
client-side. This is default process of converting the JSON data into the
Excel. On the client-side, download the converted Excel file if we save the
file using our ‘Save As’ option in the file Menu. Below mentioned the
code snippet for your reference,Code snippet:

public IActionResult Save([FromForm] SaveSettings
  saveSettings)
  {
      return Workbook.Save(saveSettings);
  }

Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Default_save_action-723152794And
also, if you want to save the JSON data of the Spreadsheet as fileStream then
you can save the JSON data as stream by defining the type on Save method in
server side as mentioned below. And you can process the file stream and save it
in the server based on your need.

public IActionResult Save([FromForm]SaveSettings saveSettings)
  {
     
  try
     
  {
         
  // Convert Spreadsheet data as Stream
          Stream fileStream = Workbook.Save<Stream>(saveSettings);
          return
  Content("Saved in Server");
     
  }
     
  catch (Exception)
     
  {
         
  return Content("Failure");
      }
  }

Below attached the video demonstration for the above code
snippet along with the Web API with the above information for your reference,Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Save_as_stream_in_server2125033468Web API: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebAPI_(5)1417364965 For more
information, please refer the below documentation,https://ej2.syncfusion.com/vue/documentation/spreadsheet/open-savehttps://help.syncfusion.com/file-formats/xlsio/overviewKindly, check the above details in your end. If we
misunderstood your reported, please share the detailed description of your
requirement along with screenshot or video demonstration. Based on that, we
will check and provide you the better solution quickly.Import and Export support for Node.js:Currently, we
don’t have support for import and export functionality for Spreadsheet in
Node.js. However, we have already considered to provide support for
client-side import and export actions in Spreadsheet as a feature, and it
will be available in any of our upcoming releases. You can track the
status of this feature using below link from our feedback portal,

Feedback Portal Link:https://www.syncfusion.com/feedback/18431/need-to-provide-support-for-client-side-importing-in-spreadsheetUnfortunately,
we are unable to implement this feature immediately. Since we have some more
bug fixes and features that are prior than this feature is in queue scheduled
for upcoming releases, we can’t commit this feature at present. We usually have
an interval of at least three months between the releases.At the
planning stage for every release cycle, we review all the open features once
again and finalize features for implementation based on specific parameters
including product vision, technological feasibility, and customer interest.
Once we have anything definite to share about these features implementation, we
will move the feedback to scheduled status with the tentative release timeline.
We appreciate your patience until then.

Janakiraman Sakthivel · Answer

Hi Bilal,

Currently, we are working on your reported requirement at our end and will update you with further details soon. We appreciate your patience until then.

Sridhar Alagiri Samy · Answer

Hi Bilal,We have reviewed your query regarding "programmatically
saving the spreadsheet to your server," and we can accomplish this using
our saveAsJson
method in conjunction with a fetch call to our save service to store the
spreadsheet as blob data. For your convenience, we have prepared a sample and a
WebAPI service to fulfill your requirements.Rather than utilizing our default save action, we recommend invoking
the Save action via a fetch call at the sample level, as demonstrated
below:

saveHandler:
  function () {
        var spreadsheet =
  this.$refs.spreadsheet;
        // Convert the spreadsheet workbook to
  JSON data.
        spreadsheet.saveAsJson().then((json) => {
          const formData = new FormData();
          formData.append('FileName',
  'Sample');
          formData.append('saveType', 'Xlsx');
          // Passing the JSON data to perform
  the save operation.
          formData.append('JSONData',
  JSON.stringify(json.jsonObject.Workbook));
          formData.append(
            'PdfLayoutSettings',
            JSON.stringify({ FitSheetOnOnePage:
  false })
          );
          // Using fetch to invoke the save process.
          fetch('https://localhost:44354/api/spreadsheet/save',
  {
            method: 'POST',
            body: formData,
          })
            .then((response) => {
              if (response.ok) {
                return response.blob();
              } else {
                return Promise.reject({
                  message: response.statusText,
                });
              }
            })
            .then((data) => {
              const blobData = data;
              // In the save complete event,
  you will get the Excel as blob data.
              console.log(blobData);
              // Converting the Excel blob data into an Excel file.
              const excelFile = new
  File([blobData], 'Sample.xlsx');
              console.log(excelFile);
              // Generating form data with the
  saved Excel file.
              const formData = new FormData();
              formData.append('file',
  excelFile);
              // Here you can invoke your node.js server with the
  saved Excel file and save it into your server.
            });
        });
  }

In this approach, we convert our workbook into JSON data
using the saveAsJson
method and transmit the JSON data to the save service for processing via fetch.At the Save service, we handle the JSON data and return the
Excel file to the client as Excel blob data.Upon a successful fetch, the Excel file is received as
blob data, which can be converted into a file using the provided code snippet.You can then send the saved Excel file to your node.js
server and store it accordingly.Sample: https://stackblitz.com/edit/gdrp9z?file=src%2FApp.vueWebAPI: Please check the attachment.Note: Launch the service before running the
client-side sample and use the launched save service URL in the fetch call.Please review the provided sample and feel free to reach out
if you require further assistance.Regards,Sridhar.Attachment: WebAPI_ab6b1948.zip

Bilal · Answer

Hi

Sridhar Alagiri Samy,I couldn't find any library that transforms the ejs-spreadsheet JSONData to xlsx file, I suppose there is a custom service that does that in the back end?Is there any support for Node.js?