How to export Angular Table to csv in Angular 10

Question

I have a table that I generate from BLOB html stored in a database. I have managed to export the table generated to excel and pdf, now I need the same table in csv. Have tried to research but all am getting is passing json and generating the csv, but I want to just pass the table ID and export to CSV.

What I have done for excel.

 exportexcel(): void {
    /* table id is passed over here */
    let element = document.getElementById('htmlData');
    const ws: XLSX.WorkSheet =XLSX.utils.table_to_sheet(element);

    /* generate workbook and add the worksheet */
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

    /* save to file */
    XLSX.writeFile(wb, this.fileName);

  }

How can I achieve the same by passing let element = document.getElementById('htmlData'); and export it to csv. I don't want to go through the option of mat-table-exporter. Thank you in advance

Answer 1

May be following code would be helpful for you!

 exportcsv(): void {
    let csv='';
    let table=document.getElementById("htmlData");
    let tr=table.children[0].children[0];
    for(let i=0;i<tr.children.length;i++)
    {
        csv+=tr.children[i].innerText+",";
    }
    csv=csv.substring(0,csv.length-1)+"\n";
    let tbody=table.children[1];
    for(let i=0;i<tbody.children.length;i++)
    {
        for(let j=0;j<tbody.children[i].children.length;j++)
        {
            csv+=tbody.children[i].children[j].innerText+",";
        }
        csv=csv.substring(0,csv.length-1)+"\n";
    }
    csv=csv.substring(0,csv.length-1)+"\n";
        let hiddenElement = document.createElement('a');
        hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
        hiddenElement.target = '_blank';
        hiddenElement.download = 'data.csv';
        hiddenElement.click();
}

Answer 2

If you need more dynamic functionality then do not convert html element in to csv. For example, If in future you would like to implement pagination etc. Then It can be done as follow:

exportCsv(): void {
  let csv = '';
  for (let column = 0; column < this.columns.length; column++) {
    csv += this.columns[column] + ';';
    csv = csv.replace(/\n/g, '');
  }
  csv = csv.substring(0, csv.length - 1) + '\n';
  const rows = this.filterdRows;

  for (let row = 0; row < rows.length; row++) {
   for (let rowElement = 0; rowElement < rows[row].length; rowElement++) {
      csv += rows[row][rowElement] + ';';
   }
    csv = csv.substring(0, csv.length - 1) + '\n';
  }
  csv = csv.substring(0, csv.length - 1) + '\n';
  const docElement = document.createElement('a');
  const universalBOM = '\uFEFF';

  //You can edit the code for the file name according to your requirements
  let filename = this.filename + '_';
  filename = filename.concat(this.currentDateString.toString());
  const fileNameWithType = filename.concat('.csv');
  docElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(universalBOM + csv);
  docElement.target = '_blank';
  docElement.download = fileNameWithType;
  docElement.click();
}