Angular Spreadsheet Data Import & Export
The Spreadsheet provides built-in tools for exporting and importing Excel and JSON formatted files. This helps you to save your work or load any local .xlsx or JSON file directly into the Spreadsheet.
Importing Excel File
You can import an Excel file from your file system directly into the Spreadsheet by using the built-in Open... tool of the File menu.
The following example demonstrates the import tool in action.
Exporting to Excel File
The Spreadsheet allows you to store the active worksheet as an Excel file. By default, the file will be saved locally as a Workbook.xlsx file. You can change the file name or forward the downloaded file to a server by providing an ExcelExportSettings object to the excel property of the Spreadsheet.
<kendo-spreadsheet
[excel]="{fileName: 'myFile.xlsx'}"
></kendo-spreadsheet>The component allows you to export the current document by using:
Using the Built-in Tool
You can use the built-in Export... tool in the File menu to export the current sheet to an Excel file.
The following example demonstrates the tool in action.
Triggering Export Externally
The Spreadsheet allows you to download the currently active sheet externally by using the saveAsExcel() method of the SpreadsheetWidget.
import { saveAs } from '@progress/kendo-file-saver';
import { Workbook } from '@progress/kendo-ooxml';
...
public onExcelExport(spreadsheet: SpreadsheetComponent): void {
spreadsheet.spreadsheetWidget.saveAsExcel({saveAs, Workbook});
}The following example demonstrates how to export the Spreadsheet by using a custom button.
Importing JSON Data
You can use a custom object that matches the DocumentDescriptor type and load it into the Spreadsheet. This is especially useful when you want to restore the state of the Spreadsheet. Use the fromJSON method of SpreadsheetWidget and provide the necessary JSON as a parameter.
public loadJSON(spreadsheet: SpreadsheetComponent): void {
spreadsheet.spreadsheetWidget.fromJSON({sheets: data});
}The following example demonstrates the fromJSON method in action.
Saving to JSON Data
To serialize the workbook, use the saveJSON or toJSON method. The difference between both is that the saveJSON method returns a Promise object that yields the JSON data when it is available. The saveJSON is typically used when saving embedded images.
public onSave(spreadsheet: SpreadsheetComponent): void {
spreadsheet.spreadsheetWidget.saveJSON().then((data) => {
this.jsonData = data;
});
}The following example demonstrates the saveJSON methods in action.