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...
Collapse
 
chriz_ profile image
Chriz

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();

Collapse
 
sokkimthanh profile image
Sok Kim Thanh

:) Thanks

Collapse
 
habibcseju profile image
Habib • Edited

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

Collapse
 
hshahul profile image
hshahul

How to change the sheetname in download CSV file?

Collapse
 
idrisrampurawala profile image
Idris Rampurawala

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

   // check out this line
    XLSX.utils.book_append_sheet(workbook, ws, 'Sheet1');
Enter fullscreen mode Exit fullscreen mode
Collapse
 
hshahul profile image
hshahul

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.

Thread Thread
 
idrisrampurawala profile image
Idris Rampurawala

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

Collapse
 
technov profile image
TechNov

Thanks, you save my day

Collapse
 
wilburrito profile image
wilburrito

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.

Collapse
 
idrisrampurawala profile image
Idris Rampurawala

Hey, you can check out my GitHub repo of this implementation to accomplish your use case ☺️

Collapse
 
kotakishore81 profile image
kishore kota

how to protected the sheet in angular excel export

  1. specific columns disable to edit
  2. don't allow to add new row -
  3. don't delete existing records
Collapse
 
100hpfvr profile image
Mateus com overclock de café

i'm using angular 13, this type error occurs. Any idea to how resolve? :/

Collapse
 
localghost profile image
localghost

what if when exporting large sets of data, it doesnt export everything just the header + 100 rows