# 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 The Spreadsheet imports cells from Excel tables as regular worksheet cells. It does not preserve their table definitions ([ListObjects](https://learn.microsoft.com/en-us/office/vba/api/excel.listobject)).

The following example demonstrates the import tool in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/spreadsheet/import-export/source.txt)

## 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`](https://www.telerik.com/kendo-angular-ui-develop/components/spreadsheet/api/excelexportsettings) object to the [`excelExportSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/spreadsheet/api/spreadsheetcomponent#excelexportsettings) input.

```html
<kendo-spreadsheet
    [excelExportSettings]="{ fileName: 'myFile.xlsx' }"
></kendo-spreadsheet>
```

You can trigger the export by using:

* [The built-in File menu tool](https://www.telerik.com/kendo-angular-ui-develop/components/spreadsheet/import-export/excel#using-the-built-in-tool)
* [The `saveAsExcel` method](https://www.telerik.com/kendo-angular-ui-develop/components/spreadsheet/import-export/excel#triggering-export-externally)

### 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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/spreadsheet/import-export/source.txt)

### 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()`](https://www.telerik.com/kendo-angular-ui-develop/components/spreadsheet/api/spreadsheetwidget#saveasexcel) method of the [`SpreadsheetWidget`](https://www.telerik.com/kendo-angular-ui-develop/components/spreadsheet/api/spreadsheetwidget).

```ts
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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/spreadsheet/import-export/external-export/source.txt)

### 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:

```ts
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()`.

## Suggested Links

* [PDF Export](https://www.telerik.com/kendo-angular-ui-develop/components/spreadsheet/import-export/pdf-export)
* [JSON Import & Export](https://www.telerik.com/kendo-angular-ui-develop/components/spreadsheet/import-export/json)
* [API Reference of the `ExcelExportSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/spreadsheet/api/excelexportsettings)
* [API Reference of the `SpreadsheetComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/spreadsheet/api/spreadsheetcomponent)