How to export data to Excel in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Exporting data to Excel requires generating a real .xlsx binary file with proper formatting, unlike CSV which is plain text — and SheetJS (xlsx) is the standard library for this task in browser-based applications.
As the creator of CoreUI with 25 years of experience building enterprise Angular dashboards, I’ve implemented Excel export in dozens of admin panels where users need formatted spreadsheets with column widths and headers.
SheetJS converts your JavaScript arrays or objects to workbook format entirely in the browser, with no server involvement required for simple exports.
The library is tree-shakeable in its community edition, keeping the bundle impact manageable.
Install SheetJS and create an export service.
npm install xlsx
// excel-export.service.ts
import { Injectable } from '@angular/core'
import * as XLSX from 'xlsx'
@Injectable({ providedIn: 'root' })
export class ExcelExportService {
exportToExcel<T extends Record<string, unknown>>(
data: T[],
filename = 'export.xlsx',
sheetName = 'Sheet1'
): void {
if (!data.length) return
// Create worksheet from JSON data
const worksheet = XLSX.utils.json_to_sheet(data)
// Set column widths based on content
const cols = Object.keys(data[0]).map(key => ({
wch: Math.max(key.length, ...data.map(row => String(row[key] ?? '').length)) + 2
}))
worksheet['!cols'] = cols
// Create workbook and append the worksheet
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
// Trigger browser download
XLSX.writeFile(workbook, filename)
}
exportMultipleSheets(
sheets: Array<{ name: string; data: Record<string, unknown>[] }>,
filename = 'export.xlsx'
): void {
const workbook = XLSX.utils.book_new()
for (const sheet of sheets) {
const worksheet = XLSX.utils.json_to_sheet(sheet.data)
XLSX.utils.book_append_sheet(workbook, worksheet, sheet.name)
}
XLSX.writeFile(workbook, filename)
}
}
XLSX.utils.json_to_sheet converts an array of objects to a worksheet, using object keys as column headers. Setting worksheet['!cols'] controls column widths — calculating them from the actual data prevents text from being cut off. XLSX.writeFile handles the browser download automatically.
Using the Export Service
Export table data from a component.
// users.component.ts
import { Component } from '@angular/core'
import { ExcelExportService } from './excel-export.service'
@Component({
selector: 'app-users',
standalone: true,
template: `
<button (click)="exportUsers()">Export to Excel</button>
<button (click)="exportReport()">Export Full Report</button>
`
})
export class UsersComponent {
users = [
{ Name: 'Alice Smith', Email: '[email protected]', Role: 'Admin', Joined: '2026-01-15' },
{ Name: 'Bob Jones', Email: '[email protected]', Role: 'User', Joined: '2026-02-03' }
]
orders = [
{ OrderId: 1001, Customer: 'Alice Smith', Total: 149.99, Status: 'Completed' },
{ OrderId: 1002, Customer: 'Bob Jones', Total: 59.99, Status: 'Pending' }
]
constructor(private excelExport: ExcelExportService) {}
exportUsers(): void {
this.excelExport.exportToExcel(this.users, 'users.xlsx', 'Users')
}
exportReport(): void {
// Export multiple sheets in one file
this.excelExport.exportMultipleSheets([
{ name: 'Users', data: this.users },
{ name: 'Orders', data: this.orders }
], 'full-report.xlsx')
}
}
Use capitalized, readable object keys as data column headers — SheetJS uses the keys as-is for column header cells. Multi-sheet exports are useful for reports that contain related but distinct datasets.
Best Practice Note
This is the same Excel export approach used in CoreUI Angular admin templates for reporting pages. For very large datasets, generate the Excel file on the server and stream it to the client to avoid blocking the browser. SheetJS supports cell formatting, formulas, and frozen rows in its Pro edition. For CSV exports (simpler format, no library needed), see how to export data to CSV in Angular.
