Angular Spreadsheet Excel Import and Export
The Spreadsheet provides built-in tools for loading Excel files from your file system and saving the active worksheet back as an .xlsx file. This lets users work with familiar Excel documents directly in the browser.
Importing an Excel File
To load an existing Excel workbook, open the File menu and select Open.... The Spreadsheet reads the selected .xlsx file and renders its content, including cell values, formatting, and formulas. Note that only the features supported by the Spreadsheet are preserved during import.
The following example demonstrates the import tool in action.
Exporting to Excel
The Spreadsheet saves the active worksheet as an Excel file. By default, the file is named Workbook.xlsx. To customize the file name or forward the download to a server, bind an ExcelExportSettings object to the excelExportSettings input.
<kendo-spreadsheet
[excelExportSettings]="{ fileName: 'myFile.xlsx' }"
></kendo-spreadsheet>You can trigger the export by using:
Using the Built-in Tool
The simplest way to export is through the Export... option in the built-in File menu. When the user selects it, the Spreadsheet generates an .xlsx file from the active worksheet and downloads it immediately.
The following example demonstrates the tool in action.
Triggering Export Externally
When you need to initiate the export from your own UI, such as a toolbar button outside the Spreadsheet, use the saveAsExcel() method of the SpreadsheetWidget.
import { saveAs } from '@progress/kendo-file-saver';
import { Workbook } from '@progress/kendo-ooxml';
import { SpreadsheetComponent } from '@progress/kendo-angular-spreadsheet';
...
public onExcelExport(spreadsheet: SpreadsheetComponent): void {
spreadsheet.spreadsheetWidget.saveAsExcel({ saveAs, Workbook });
}The following example demonstrates how to export the Spreadsheet by using a custom button.
Uploading the Exported File
To send the exported Excel file to a server, call saveAsExcel() without the saveAs option. The method returns a Promise that resolves to the exported file data. Append the resulting Blob and custom values to a FormData object, then post it through HttpClient.
The following snippet demonstrates one way to upload the exported Excel file to a server along with custom form fields:
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';
import { Workbook } from '@progress/kendo-ooxml';
import { SpreadsheetComponent } from '@progress/kendo-angular-spreadsheet';
public exportUrl = '/api/export/spreadsheet';
constructor(private http: HttpClient) {}
public async uploadExcelFile(spreadsheet: SpreadsheetComponent): Promise<void> {
// Omit saveAs so the application can handle the exported data.
const exportedFile = await spreadsheet.spreadsheetWidget.saveAsExcel({ Workbook });
// Decode a data URL before appending it as a file.
const file = exportedFile instanceof Blob
? exportedFile
: await (await fetch(exportedFile)).blob();
const formData = new FormData();
// Match these field names to the server endpoint contract.
formData.append('ReqId', String(Date.now()));
formData.append('FileId', '1');
formData.append('EditedSheets', this.activeSheet);
formData.append('File', file, 'Workbook.xlsx');
await firstValueFrom(this.http.post(this.exportUrl, formData));
}Replace exportUrl with the URL of your server endpoint. Make sure that the SpreadsheetComponent and its spreadsheetWidget instance are available before you call saveAsExcel().