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.

Copy Code<kendo-spreadsheet
    [excel]="{fileName: 'myFile.xlsx'}"
></kendo-spreadsheet>

The component allows you to export the current document by using:

• The built-in toolbar tool
• The saveAsExcel method

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.

Copy Codeimport { 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.

Copy Codepublic 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.

Copy Codepublic onSave(spreadsheet: SpreadsheetComponent): void {
        spreadsheet.spreadsheetWidget.saveJSON().then((data) => {
            this.jsonData = data;
    });
}

The following example demonstrates the saveJSON methods in action.

Suggested Links

• API Reference of the Spreadsheet
• API Reference of the SpreadsheetComponent