DEV Community

Exporting Data To Excel and CSV in Angular

Idris Rampurawala on August 31, 2020

While working on a web application, there are various instances where we would allow our users to download the data into their specific formats. On...

Read full post

Chriz • Oct 20 '21

Thanks for the CSV code... You can also use the following code instead of depending on the FileSaver lib:

const blob = new Blob([csvContent], { type: 'text/csv'});
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = fileName;
a.click();

Sok Kim Thanh • Jun 17 '21

:) Thanks

hshahul • Jul 28 '21

How to change the sheetname in download CSV file?

Idris Rampurawala • Jul 29 '21

Hey, you can find the same in the export.service.ts

 // check out this line XLSX.utils.book_append_sheet(workbook, ws, 'Sheet1');

hshahul • Jul 29 '21

This one for export excel right? not for export CSV? Please check and let me sample example where I need to add this code in the following code if it is correct...

private saveAsFile(buffer: any, fileName: string, fileType: string): void {
const data: Blob = new Blob([buffer], { type: fileType });
FileSaver.saveAs(data, fileName);
}

/**

Creates an array of data to csv. It will automatically generate title row based on object keys. *
@param rows array of data to be converted to CSV.
@param fileName filename to save as.
@param columns array of object properties to convert to CSV. If skipped, then all object properties will be used for CSV. */ public exportToCsv(rows: object[], fileName: string, columns?: string[]): string { if (!rows || !rows.length) { return; } const separator = ','; const keys = Object.keys(rows[0]).filter(k => { if (columns?.length) { return columns.includes(k); } else { return true; } }); const csvContent = keys.join(separator) + '\n' + rows.map(row => { return keys.map(k => { let cell = row[k] === null || row[k] === undefined ? '' : row[k]; cell = cell instanceof Date ? cell.toLocaleString() : cell.toString().replace(/"/g, '""'); if (cell.search(/("|,|\n)/g) >= 0) { cell = "${cell}"; } return cell; }).join(separator); }).join('\n'); this.saveAsFile(csvContent, ${fileName}${CSV_EXTENSION}, CSV_TYPE); } }

I want to give different name for file and tab in CSV.

Idris Rampurawala • Jul 29 '21

You can pass the filename as mentioned in the function's exportToCsv dosctring. Also, CSV's won't have sheets in it ;)

Habib • Dec 13 '21 • Edited

can you share how to export html table to copy , pdf ,pagination feature?

TechNov • Sep 29 '22

Thanks, you save my day

wilburrito • Jun 19 '21

Hey, so how do I then make this excel sheet downloadable on the client's end? Basically, I want them to be able to click a button and have this excel sheet downloaded.