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.
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.
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
//Initialize the Spreadsheet control
let spreadsheet: Spreadsheet = new Spreadsheet({
allowOpen: true,
openUrl: 'https://ej2services.syncfusion.com/development/web-services/api/spreadsheet/open'
});
//Render the initialized Spreadsheet
spreadsheet.appendTo('#spreadsheet');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 SpreadSheet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link rel="shortcut icon" href="resources/favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-spreadsheet/styles/material.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="system.config.js"></script>
</head>
<body>
<!--Element which is going to render-->
<div id='loader'>Loading....</div>
<div id='container'>
<div id="spreadsheet"></div>
</div>
</body>
</html>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.
import { Spreadsheet, SheetModel } from '@syncfusion/ej2-spreadsheet';
let sheet: SheetModel[] = [{
rows: [{
cells: [
{ index: 0, value: 'Order ID', style: { fontWeight: 'bold' }},
{ value: 'Customer ID', style: { fontWeight: 'bold' }},
{ value: 'Employee ID', style: { fontWeight: 'bold' }},
{ value: 'Ship Name', style: { fontWeight: 'bold' }},
{ value: 'Ship City', style: { fontWeight: 'bold' }},
{ value: 'Ship Address', style: { fontWeight: 'bold' }}
]
},
{
cells: [
{ value: '10248' },
{ value: 'VINET' },
{ value: '5' },
{ value: 'Vins et alcools Chevalier' },
{ value: 'Reims' },
{ value: '59 rue de lAbbaye' }
]
},
{
cells: [
{ value: '10249' },
{ value: 'TOMSP' },
{ value: '6' },
{ value: 'Toms Spezialitäten' },
{ value: 'Münster' },
{ value: 'Luisenstr. 48' }
]
},
{
cells: [
{ value: '10250' },
{ value: 'HANAR' },
{ value: '4' },
{ value: 'Hanari Carnes' },
{ value: 'Rio de Janeiro' },
{ value: 'Rua do Paço, 67' }
]
},
{
cells: [
{ value: '10251' },
{ value: 'VICTE' },
{ value: '3' },
{ value: 'Victuailles en stock' },
{ value: 'Lyon' },
{ value: '2, rue du Commerce' }
]
}],
columns: [
{ width: 80 }, { width: 80 }, { width: 82 },
{ width: 160 }, { width: 110 }, { width: 130 }
]
}];
//Initialize the Spreadsheet control
let spreadsheet: Spreadsheet = new Spreadsheet({
sheets: sheet,
allowSave: true,
saveUrl: 'https://ej2services.syncfusion.com/development/web-services/api/spreadsheet/save'
});
//Render the initialized Spreadsheet
spreadsheet.appendTo('#spreadsheet');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 SpreadSheet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link rel="shortcut icon" href="resources/favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-spreadsheet/styles/material.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="system.config.js"></script>
</head>
<body>
<!--Element which is going to render-->
<div id='loader'>Loading....</div>
<div id='container'>
<div id="spreadsheet"></div>
</div>
</body>
</html>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.
import { Spreadsheet, ColumnModel } from '@syncfusion/ej2-spreadsheet';
import { Button } from '@syncfusion/ej2-buttons';
import { data } from './datasource.ts';
let columns: ColumnModel[] = [{ width: 100 }, { width: 130 },{ width: 96},
{ width: 130 }, { width: 130 },{ width: 96},
{ width: 100 }, { width: 100 },{ width: 110}, { width: 100 }, { width: 130 },{ width: 150}]
let spreadsheet: Spreadsheet = new Spreadsheet({
sheets: [{ ranges: [{ dataSource: data }], columns: columns }],
allowSave: true
});
//Render the initialized Spreadsheet
spreadsheet.appendTo('#spreadsheet');
let button: Button = new Button({content: 'Save As xlsx'});
button.appendTo('#xlsx');
let button1: Button = new Button({content: 'Save As xls'});
button1.appendTo('#xls');
let button2: Button = new Button({content: 'Save As csv'});
button2.appendTo('#csv');
let button3: Button = new Button({content: 'Save As pdf'});
button3.appendTo('#pdf');
document.getElementById('xlsx').onclick = (): void => {
spreadsheet.save({url: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', fileName: "Sample", saveType: "Xlsx"});
}
document.getElementById('xls').onclick = (): void => {
spreadsheet.save({url: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', fileName: "Sample", saveType: "Xls"});
}
document.getElementById('csv').onclick = (): void => {
spreadsheet.save({url: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save',fileName: "Sample", saveType: "Csv"});
}
document.getElementById('pdf').onclick = (): void => {
spreadsheet.save({url: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save',fileName: "Sample", saveType: "Pdf"});
}<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 SpreadSheet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link rel="shortcut icon" href="resources/favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-spreadsheet/styles/material.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="system.config.js"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<!--Element which is going to render-->
<div id='loader'>Loading....</div>
<div id='container'>
<button id="xlsx" style="margin-bottom: 10px;">Save As xlsx</button>
<button id="xls" style="margin-bottom: 10px;">Save As xls</button>
<button id="csv" style="margin-bottom: 10px;">Save As csv</button>
<button id="pdf" style="margin-bottom: 10px;">Save As pdf</button>
<div id="spreadsheet"></div>
</div>
</body>
</html>Import and export are processed in server-side using Spreadsheet server library. The following code snippets shows server configuration using WebAPI service,
[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);
}
}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.
The following list of Excel file formats are supported in Spreadsheet: