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

Salahuddin Ahmed · Accepted Answer · 2021-03-15 20:13:58Z

3

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

edited Mar 15, 2021 at 20:13

answered Mar 15, 2021 at 20:00

Salahuddin Ahmed

5,7344 gold badges20 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

H S W · Accepted Answer · 2022-03-21 11:01:58Z

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

Collectives™ on Stack Overflow

How to export Angular Table to csv in Angular 10

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related