Export your table data to a .csv file

I love that my job has me learning a new thing ( or two :) ) every day. This time it was exporting table data to a .csv file that could therefore be used whichever way needed. Of course, there are many ways to go about this.

Lets set the project in view here:
-Angular 11
-Mock data being used in a table
-Task to return the table data as viewable and if desired, printable.

Now to figure out how to approach it.

As I was figuring out how I wanted to work on this, my mind was on simple and to the point as we just want to create the file client-side. I found https://www.npmjs.com/package/file-saver to which suits my needs. Now all that's left is to implement the exportCSV function.

In my typescript file, I added the following:

 exportFile(data: any) {
    const replacer = (key, value) => value === null ? '' : value;
    const header = Object.keys(data[0]);
    let csv = data.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','));
    csv.unshift(header.join(','));
    let csvArray = csv.join('\r\n');

    var blob = new Blob([csvArray], {type: 'text/csv' });
    saveAs(blob, "ClaimPayments.csv");
  }

to which all I would need now is to add a button in the corresponding html file:

<button (click)="exportFile(this.data)">Export as CSV</button>

where this.data is:

  data: Object[] = [
    { "Policy Number": "922874", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'Bob', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" },
  { "Policy Number": "922873", "Claim Number": "001568", "Check Number": "922873", "Payment Type": 'Check',
  "Check Date": '01/01/2021', "Policy Name": 'A Name', "Payee Name": 'A Nother Name', "Amount": "100.00" }
  ];

https://quick-csv-file-from-data.stackblitz.io