Search results

Open and Save in Vue Spreadsheet component

14 Apr 2021 / 5 minutes to read

The native data format for Spreadsheet is JSON. When you open an excel file, it needs to be read and converted to client side Spreadsheet model. The converted client side Spreadsheet model is sent as JSON which is used to render Spreadsheet. Similarly, when you save the Spreadsheet, the client Spreadsheet model is sent to the server as JSON for processing and saved as Excel file formats. Server configuration is used for this process.

Open

The Spreadsheet control opens an Excel document with its data, style, format, and more. To enable this feature, set allowOpen as true and assign service url to the openUrl property.

User Interface:

In user interface you can open an Excel document by clicking File > Open menu item in ribbon.

The following code example shows Open option in the Spreadsheet control.

Source
Preview
app.vue
Copied to clipboard
<template>
   <ejs-spreadsheet :openUrl="openUrl" :allowOpen="true"></ejs-spreadsheet>
</template>

<script>
import Vue from "vue";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);
export default {
   data: () => {
    return {
      openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',
    }
  }
}
</script>

<style>
 @import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
 @import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
 @import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>
  • Use Ctrl + O keyboard shortcut to open Excel documents.
  • The default value of the allowOpen property is true. For demonstration purpose, we have showcased the allowOpen property in previous code snippet.

Save

The Spreadsheet control saves its data, style, format, and more as Excel file document. To enable this feature, set allowSave as true and assign service url to the saveUrl property.

User Interface:

In user interface, you can save Spreadsheet data as Excel document by clicking File > Save As menu item in ribbon.

The following code example shows Save option in the Spreadsheet control.

Source
Preview
app.vue
data.js
Copied to clipboard
<template>
   <ejs-spreadsheet :saveUrl="saveUrl" :allowSave="true">
   <e-sheets>
          <e-sheet>
            <e-ranges>
              <e-range :dataSource="dataSource"></e-range>
            </e-ranges>
            <e-columns>
              <e-column :width="width1"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width1"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width3"></e-column>
            </e-columns>
          </e-sheet>
        </e-sheets></ejs-spreadsheet>
</template>

<script>
import Vue from "vue";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
import { data } from './data.js';
Vue.use(SpreadsheetPlugin);
export default {
   data: () => {
    return {
      dataSource: data,
      width1: 180,
      width2: 130,
      width3: 120,
      saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save'
    }
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
 @import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
 @import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.data = [
        {
            "Customer Name": "Romona Heaslip",
            "Model": "Taurus",
            "Color": "Aquamarine",
            "Payment Mode": "Debit Card",
            "Delivery Date": "07/11/2015",
            "Amount": "8529.22"
        },
        {
            "Customer Name": "Clare Batterton",
            "Model": "Sparrow",
            "Color": "Pink",
            "Payment Mode": "Cash On Delivery",
            "Delivery Date": "7/13/2016",
            "Amount": "17866.19"
        },
        {
            "Customer Name": "Eamon Traise",
            "Model": "Grand Cherokee",
            "Color": "Blue",
            "Payment Mode": "Net Banking",
            "Delivery Date": "09/04/2015",
            "Amount": "13853.09"
        },
        {
            "Customer Name": "Julius Gorner",
            "Model": "GTO",
            "Color": "Aquamarine",
            "Payment Mode": "Credit Card",
            "Delivery Date": "12/15/2017",
            "Amount": "2338.74"
        },
        {
            "Customer Name": "Jenna Schoolfield",
            "Model": "LX",
            "Color": "Yellow",
            "Payment Mode": "Credit Card",
            "Delivery Date": "10/08/2014",
            "Amount": "9578.45"
        }
    ]
});
  • Use Ctrl + S keyboard shortcut to save the Spreadsheet data as Excel file.
  • The default value of allowSave property is true. For demonstration purpose, we have showcased the allowSave property in previous code snippet.

Methods

To save the Spreadsheet document as an xlsx, xls, csv, or pdf file, by using save method should be called with the url, fileName and saveType as parameters. The following code example shows to save the spreadsheet file as an xlsx, xls, csv, or pdf in the button click event.

Source
Preview
app.vue
data.js
Copied to clipboard
<template>
  <div>
    <ejs-button id='xlsx' v-on:click.native="xlsx">Save As xlsx</ejs-button>
    <ejs-button id='xls' v-on:click.native="xls">Save As xls</ejs-button>
    <ejs-button id='csv' v-on:click.native="csv">Save As csv</ejs-button>
    <ejs-button id='pdf' v-on:click.native="pdf">Save As pdf</ejs-button>
    <ejs-spreadsheet ref="spreadsheet">
      <e-sheets>
          <e-sheet>
            <e-ranges>
              <e-range :dataSource="dataSource"></e-range>
            </e-ranges>
             <e-columns>
              <e-column :width="width1"></e-column>
              <e-column :width="width2"></e-column>
            </e-columns>
          </e-sheet>
        </e-sheets></ejs-spreadsheet>
        <div>
</template>

<script>
import Vue from "vue";
import { SpreadsheetPlugin, getRangeIndexes } from "@syncfusion/ej2-vue-spreadsheet";
import { addClass, removeClass } from '@syncfusion/ej2-base';
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { defaultData } from './data.js';
Vue.use(SpreadsheetPlugin);
Vue.use(ButtonPlugin);
export default {
   data: () => {
    return {
      dataSource: defaultData,
      width1: 130,
      width2: 96,
    }
  },
  methods: {
  xlsx: function(event) {
      var spreadsheet = this.$refs.spreadsheet;
      spreadsheet.save({url: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', fileName: "Sample", saveType: "Xlsx"});
    },
  xls: function(event) {
      var spreadsheet = this.$refs.spreadsheet;
      spreadsheet.save({url: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', fileName: "Sample", saveType: "Xls"});
    },
  csv: function(event) {
      var spreadsheet = this.$refs.spreadsheet;
      spreadsheet.save({url: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', fileName: "Sample", saveType: "Csv"});
    },
  pdf: function(event) {
      var spreadsheet = this.$refs.spreadsheet;
      spreadsheet.save({url: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', fileName: "Sample", saveType: "Pdf"});
    }
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
 @import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
 @import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";

</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.tradeData = [
        {
          "EmployeeID": 10001,
          "Employees": "Laura Nancy",
          "Designation": "Designer",
          "Location": "France",
          "Status": "Inactive",
          "Trustworthiness": "Sufficient",
          "Rating": 0,
          "Software": 69,
          "EmployeeImg": "usermale",
          "CurrentSalary": 84194,
          "Address": "Taucherstraße 10",
          "Mail": "laura15@jourrapide.com"
        },
        {
          "EmployeeID": 10002,
          "Employees": "Zachery Van",
          "Designation": "CFO",
          "Location": "Canada",
          "Status": "Inactive",
          "Trustworthiness": "Insufficient",
          "Rating": 3,
          "Software": 99,
          "EmployeeImg": "usermale",
          "CurrentSalary": 55349,
          "Address": "5ª Ave. Los Palos Grandes",
          "Mail": "zachery109@sample.com"
        },
        {
          "EmployeeID": 10003,
          "Employees": "Rose Fuller",
          "Designation": "CFO",
          "Location": "France",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 1,
          "Software": 1,
          "EmployeeImg": "usermale",
          "CurrentSalary": 16477,
          "Address": "2817 Milton Dr.",
          "Mail": "rose55@rpy.com"
        },
        {
          "EmployeeID": 10004,
          "Employees": "Jack Bergs",
          "Designation": "Manager",
          "Location": "Mexico",
          "Status": "Inactive",
          "Trustworthiness": "Insufficient",
          "Rating": 3,
          "Software": 36,
          "EmployeeImg": "usermale",
          "CurrentSalary": 49040,
          "Address": "2, rue du Commerce",
          "Mail": "jack30@sample.com"
        },
        {
          "EmployeeID": 10005,
          "Employees": "Vinet Bergs",
          "Designation": "Program Directory",
          "Location": "UK",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 1,
          "Software": 39,
          "EmployeeImg": "usermale",
          "CurrentSalary": 5495,
          "Address": "Rua da Panificadora, 12",
          "Mail": "vinet32@jourrapide.com"
        },
        {
          "EmployeeID": 10006,
          "Employees": "Buchanan Van",
          "Designation": "Designer",
          "Location": "Germany",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 4,
          "Software": 78,
          "EmployeeImg": "usermale",
          "CurrentSalary": 42182,
          "Address": "24, place Kléber",
          "Mail": "buchanan18@mail.com"
        },
        {
          "EmployeeID": 10007,
          "Employees": "Dodsworth Nancy",
          "Designation": "Project Lead",
          "Location": "USA",
          "Status": "Inactive",
          "Trustworthiness": "Sufficient",
          "Rating": 0,
          "Software": 0,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 35776,
          "Address": "Rua do Paço, 67",
          "Mail": "dodsworth84@mail.com"
        },
        {
          "EmployeeID": 10008,
          "Employees": "Laura Jack",
          "Designation": "Developer",
          "Location": "Austria",
          "Status": "Inactive",
          "Trustworthiness": "Perfect",
          "Rating": 3,
          "Software": 89,
          "EmployeeImg": "usermale",
          "CurrentSalary": 25108,
          "Address": "Rua da Panificadora, 12",
          "Mail": "laura82@mail.com"
        },
        {
          "EmployeeID": 10009,
          "Employees": "Anne Fuller",
          "Designation": "Program Directory",
          "Location": "Mexico",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 0,
          "Software": 19,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 32568,
          "Address": "Gran Vía, 1",
          "Mail": "anne97@jourrapide.com"
        },
        {
          "EmployeeID": 10010,
          "Employees": "Buchanan Andrew",
          "Designation": "Designer",
          "Location": "Austria",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 1,
          "Software": 62,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 12320,
          "Address": "P.O. Box 555",
          "Mail": "buchanan50@jourrapide.com"
        },
        {
          "EmployeeID": 10011,
          "Employees": "Andrew Janet",
          "Designation": "System Analyst",
          "Location": "Germany",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 3,
          "Software": 8,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 20890,
          "Address": "Starenweg 5",
          "Mail": "andrew63@mail.com"
        },
        {
          "EmployeeID": 10012,
          "Employees": "Margaret Tamer",
          "Designation": "System Analyst",
          "Location": "Germany",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 4,
          "Software": 7,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 22337,
          "Address": "Magazinweg 7",
          "Mail": "margaret26@mail.com"
        },
        {
          "EmployeeID": 10013,
          "Employees": "Tamer Fuller",
          "Designation": "CFO",
          "Location": "Canada",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 3,
          "Software": 78,
          "EmployeeImg": "usermale",
          "CurrentSalary": 89181,
          "Address": "Taucherstraße 10",
          "Mail": "tamer40@arpy.com"
        },
        {
          "EmployeeID": 10014,
          "Employees": "Tamer Anne",
          "Designation": "CFO",
          "Location": "Sweden",
          "Status": "Active",
          "Trustworthiness": "Sufficient",
          "Rating": 0,
          "Software": 18,
          "EmployeeImg": "usermale",
          "CurrentSalary": 20998,
          "Address": "Taucherstraße 10",
          "Mail": "tamer68@arpy.com"
        },
        {
          "EmployeeID": 10015,
          "Employees": "Anton Davolio",
          "Designation": "Project Lead",
          "Location": "France",
          "Status": "Active",
          "Trustworthiness": "Sufficient",
          "Rating": 4,
          "Software": 8,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 48232,
          "Address": "Luisenstr. 48",
          "Mail": "anton46@mail.com"
        },
        {
          "EmployeeID": 10016,
          "Employees": "Buchanan Buchanan",
          "Designation": "System Analyst",
          "Location": "Austria",
          "Status": "Inactive",
          "Trustworthiness": "Perfect",
          "Rating": 0,
          "Software": 19,
          "EmployeeImg": "usermale",
          "CurrentSalary": 43041,
          "Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
          "Mail": "buchanan68@mail.com"
        },
        {
          "EmployeeID": 10017,
          "Employees": "King Buchanan",
          "Designation": "Program Directory",
          "Location": "Sweden",
          "Status": "Active",
          "Trustworthiness": "Sufficient",
          "Rating": 0,
          "Software": 44,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 25259,
          "Address": "Magazinweg 7",
          "Mail": "king80@jourrapide.com"
        },
        {
          "EmployeeID": 10018,
          "Employees": "Rose Michael",
          "Designation": "Project Lead",
          "Location": "Canada",
          "Status": "Active",
          "Trustworthiness": "Perfect",
          "Rating": 4,
          "Software": 31,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 91156,
          "Address": "Fauntleroy Circus",
          "Mail": "rose75@mail.com"
        },
        {
          "EmployeeID": 10019,
          "Employees": "King Bergs",
          "Designation": "Developer",
          "Location": "Germany",
          "Status": "Active",
          "Trustworthiness": "Sufficient",
          "Rating": 2,
          "Software": 29,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 28826,
          "Address": "2817 Milton Dr.",
          "Mail": "king57@jourrapide.com"
        },
        {
          "EmployeeID": 10020,
          "Employees": "Davolio Fuller",
          "Designation": "Designer",
          "Location": "Canada",
          "Status": "Inactive",
          "Trustworthiness": "Sufficient",
          "Rating": 3,
          "Software": 35,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 71035,
          "Address": "Gran Vía, 1",
          "Mail": "davolio29@arpy.com"
        },
        {
          "EmployeeID": 10021,
          "Employees": "Rose Rose",
          "Designation": "CFO",
          "Location": "Germany",
          "Status": "Active",
          "Trustworthiness": "Perfect",
          "Rating": 3,
          "Software": 38,
          "EmployeeImg": "usermale",
          "CurrentSalary": 68123,
          "Address": "Rua do Mercado, 12",
          "Mail": "rose54@arpy.com"
        },
        {
          "EmployeeID": 10022,
          "Employees": "Andrew Michael",
          "Designation": "Program Directory",
          "Location": "UK",
          "Status": "Inactive",
          "Trustworthiness": "Insufficient",
          "Rating": 2,
          "Software": 61,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 75470,
          "Address": "2, rue du Commerce",
          "Mail": "andrew88@jourrapide.com"
        },
        {
          "EmployeeID": 10023,
          "Employees": "Davolio Kathryn",
          "Designation": "Manager",
          "Location": "Germany",
          "Status": "Active",
          "Trustworthiness": "Perfect",
          "Rating": 3,
          "Software": 25,
          "EmployeeImg": "usermale",
          "CurrentSalary": 25234,
          "Address": "Hauptstr. 31",
          "Mail": "davolio42@sample.com"
        },
        {
          "EmployeeID": 10024,
          "Employees": "Anne Fleet",
          "Designation": "System Analyst",
          "Location": "UK",
          "Status": "Active",
          "Trustworthiness": "Perfect",
          "Rating": 3,
          "Software": 0,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 8341,
          "Address": "59 rue de lAbbaye",
          "Mail": "anne86@arpy.com"
        },
        {
          "EmployeeID": 10025,
          "Employees": "Margaret Andrew",
          "Designation": "System Analyst",
          "Location": "Germany",
          "Status": "Inactive",
          "Trustworthiness": "Insufficient",
          "Rating": 3,
          "Software": 51,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 84975,
          "Address": "P.O. Box 555",
          "Mail": "margaret41@arpy.com"
        },
        {
          "EmployeeID": 10026,
          "Employees": "Kathryn Laura",
          "Designation": "Project Lead",
          "Location": "Austria",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 3,
          "Software": 48,
          "EmployeeImg": "usermale",
          "CurrentSalary": 97282,
          "Address": "Avda. Azteca 123",
          "Mail": "kathryn82@rpy.com"
        },
        {
          "EmployeeID": 10027,
          "Employees": "Michael Michael",
          "Designation": "Developer",
          "Location": "UK",
          "Status": "Inactive",
          "Trustworthiness": "Perfect",
          "Rating": 4,
          "Software": 16,
          "EmployeeImg": "usermale",
          "CurrentSalary": 4184,
          "Address": "Rua do Paço, 67",
          "Mail": "michael58@jourrapide.com"
        },
        {
          "EmployeeID": 10028,
          "Employees": "Leverling Vinet",
          "Designation": "Project Lead",
          "Location": "Germany",
          "Status": "Inactive",
          "Trustworthiness": "Perfect",
          "Rating": 0,
          "Software": 57,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 38370,
          "Address": "59 rue de lAbbaye",
          "Mail": "leverling102@sample.com"
        },
        {
          "EmployeeID": 10029,
          "Employees": "Rose Jack",
          "Designation": "Developer",
          "Location": "UK",
          "Status": "Active",
          "Trustworthiness": "Perfect",
          "Rating": 0,
          "Software": 46,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 84790,
          "Address": "Rua do Mercado, 12",
          "Mail": "rose108@jourrapide.com"
        },
        {
          "EmployeeID": 10030,
          "Employees": "Vinet Van",
          "Designation": "Developer",
          "Location": "USA",
          "Status": "Active",
          "Trustworthiness": "Sufficient",
          "Rating": 0,
          "Software": 40,
          "EmployeeImg": "usermale",
          "CurrentSalary": 71005,
          "Address": "Gran Vía, 1",
          "Mail": "vinet90@jourrapide.com"
        }
      ],
      exports.defaultData=  [
        { 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
        { 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
        { 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
        { 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
        { 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
        { 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
        { 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
        { 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
        { 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
        { 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
    ]
});

Server Configuration

Import and export are processed in server-side using Spreadsheet server library. The following code snippets shows server configuration using WebAPI service,

Copied to clipboard
    [Route("api/[controller]")]
    public class SpreadsheetController : Controller
    {
        //To open excel file
        [AcceptVerbs("Post")]
        [HttpPost]
        [EnableCors("AllowAllOrigins")]
        [Route("Open")]
        public IActionResult Open(IFormCollection openRequest)
        {
            OpenRequest open = new OpenRequest();
            open.File = openRequest.Files[0];
            return Content(Workbook.Open(open));
        }

        //To save as excel file
        [AcceptVerbs("Post")]
        [HttpPost]
        [EnableCors("AllowAllOrigins")]
        [Route("Save")]
        public IActionResult Save(SaveSettings saveSettings)
        {
            return Workbook.Save(saveSettings);
        }
    }

Server Dependencies

Open and save helper functions are shipped in the Syncfusion.EJ2.Spreadsheet package, which is available in Essential Studio and nuget.org. Following list of dependencies required for Spreadsheet open and save operations.

  • Syncfusion.EJ2
  • Syncfusion.EJ2.Spreadsheet
  • Syncfusion.Compression.Base
  • Syncfusion.XlsIO.Base

Supported File Formats

The following list of Excel file formats are supported in Spreadsheet:

  • MS Excel (.xlsx)
  • MS Excel 97-2003 (.xls)
  • Comma Separated Values (.csv)

See Also