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" }
];
Top comments (0)