Save in EJ2 TypeScript Spreadsheet control
8 May 202310 minutes to read
The Spreadsheet control saves its data, style, format, and more as Excel file document. To enable this feature, set allowSave to true and assign service url to the saveUrl property.
The following list of Excel file formats are supported in Spreadsheet:
- MS Excel (.xlsx)
- MS Excel 97-2003 (.xls)
- Comma Separated Values (.csv)
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: [{
index: 0,
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://services.syncfusion.com/js/production/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="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
<script src="system.config.js"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<!--Element which is going to render-->
<div id='loader'>Loading....</div>
<button id='element'>Save</button>
<div id='container'>
<div id="spreadsheet"></div>
</div>
</body>
</html>