Custom Export based on filter on Angular Datatable

I wanted to export to CSV based on filtered data in a datatable in Angular 6. I have used angular datatable and it didn’t have the option yet although data table have the option.
So I created a custom function for exporting options using the HTML 5 feature.

Creating a Export Service

Create a file name export.service.ts under your app/services folder. If you don’t have the folder create it.Then copy paste the code given below.

  
    import {  Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class ExportService {
    constructor() { }

    export (JSONData, Title, ShowLabel) {
        var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

        var CSV = '';

        //CSV += Title + '\r\n\n';

        if (ShowLabel) {
            var row = "";
            for (var index in arrData[0]) {
                row += index + ',';

            }
            row = row.replace(/_/g, " ");
            row = row.slice(0, -1);
            CSV += row + '\r\n\n';
        }

        for (var i = 0; i < arrData.length; i++) {
            var row = "";
            for (var index in arrData[i]) {
                row += '"' + (arrData[i][index] != null ? arrData[i][index] : '') + '",';
            }

            row.slice(0, row.length - 1);

            CSV += row + '\r\n';
        }

        if (CSV == '') {
            alert("Invalid data");
            return;
        }
        var date = new Date(); 
        var fileName = "";
        fileName += Title.replace(/ /g, "_");
        //Initialize file format you want csv or xls
        var uri = 'data:text/csv;charset=utf-8,' + encodeURI(CSV);
        var link = document.createElement("a");
        link.href = uri;
        link.download = fileName +" "+ date.toLocaleDateString() + ".csv";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

    }
    
    exportFiltered(tableId?: string,excelName?:string,columnsPrint?:any){
    let exportData = []
    let lengthtable = document.getElementById("divisionTable").getElementsByTagName("tr").length;
    let table = document.getElementById("divisionTable");
    let rows =table.getElementsByTagName("tr");
    for (var i=1; i < lengthtable; i++){
      let cells =rows[i].getElementsByTagName("td");
      let exportstring = "{\"S_NO\":"+ i +",";
      for(var j=0;j<columnsPrint.columns.length;j++)
      {
        exportstring += "\""+columnsPrint.columns[j]+"\":\""+cells[j+2].innerText+"\","; 
      }
        exportstring = exportstring.substring(0, exportstring.length - 1)+ "}";  
        let obj = JSON.parse(exportstring);
        console.log(obj)
        exportData.push(obj)
        console.log(i,exportstring)
    }
        this.exportService.export(exportData, excelName, true)
  }

}
  

Now you need to import the file where you want to use and call it in constructor

  
   import { DataTableDirective } from 'angular-datatables';

   @Component({
     selector: 'app-ListTable',
     templateUrl: './ListTable.component.html',
     styleUrls: ['./ListTable.component.css']
  })
export class ListTableComponent implements OnInit, OnDestroy {

  constructor( .......  exportService: ExportService) { }
  
  export(){
    let printColumns = {
      columns : [
        "DEPARTMENT NAME" ,
        "DEPARTMENT DESCRIPTION"
      ]
    }
    this.commonService.exportFiltered("TableId","SheetName",printColumns);
  
  }

}

  

Now in the html code you need to call the export function

  
#--- This is the code for Angular datatable which you must be using, You can follow the other post where I have mentioned how to use Angular datatable --- #
<app-component-header [valuesFromParent]="componentHeaderData" (click) = "export()"></app-component-header>

<table id="divisionTable" class="table table-padded">
<thead>
<tr>
<th class="printhide">Action</th>
<th class="printhide">S. No</th>
<th>Department Name</th>
<th>Department Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tdOption printhide"></td>
<td class="printhide" scope="row">{{i + 1}}</td>
<td>{{item.divisionName}}</td>
<td>{{item.divisionDescription}}</td>
</tr>
</tbody>
</table>