Search code examples
angularangular-materialjspdfjspdf-autotable

How To Remove or Hide Column in Jspdf AutoTable While using Material Table


I Have an angular material table that I want to convert to PDF Excluding The Last Column on the image below with jsPDF autoTable https://i.sstatic.net/FoaAy.png, in component where I'm downloading the pdf the code is:

downloadingPDF: boolean = false

@Input() employees!: Employee[]; < datasource

displayedColumns = ['id','name', .... ,'details'];

  downloadPdf() {
this.downloadingPDF = true;
let doc = new jsPDF();
autoTable(doc, { html: '#table', theme: 'grid' });
doc.save('test.pdf')  };

this is my Html

 <button mat-raised-button color="primary" (click)="downloadPdf()" style="float: right;">
  {{ "Download PDF" | translate }}
</button>
<table id="table" mat-table matTableExporter [dataSource]="employees" class="mat-elevation-z8" #exporter="matTableExporter" [hiddenColumns]="[8]">
<!-- ID Column -->
<ng-container matColumnDef="id">
  <th mat-header-cell *matHeaderCellDef>ID</th>
  <td mat-cell *matCellDef="let employee">{{ employee.id }}</td>
</ng-container>

 <!-- DETAILS COLUMN -->
<ng-container matColumnDef="details" *ngIf="!downloadingPDF">
  <th mat-header-cell *matHeaderCellDef>{{ "Details" | translate }}</th>
  <td
    mat-cell
    *matCellDef="let employee"
    routerLink="detail/{{ employee.id }}"
  >
  <button mat-raised-button color="primary">
    {{ "Details" | translate }}
  </button>
  </td>
</ng-container>
 <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

I have tried doing it with a boolean value but I couldn't get it to work


Solution

  •  downloadPdf() {
    this.downloadingPDF = true;
    let doc = new jsPDF();
    autoTable(doc, { html: '#table', theme: 'grid' });
    doc.save('test.pdf')  }
    

    the solution was:

    downloadPdf() {
        this.downloadingPDF = true;
        let doc = new jsPDF();
        autoTable(
          doc, 
          { 
            html: '#table',
             theme: 'grid', 
             columns: 
             [
              {header: 'Id', dataKey: 'id'},
              {header: 'Name', dataKey: 'name'},
              {header: 'Email', dataKey: 'email'},
              {header: 'City', dataKey: 'city'},
              {header: 'Company', dataKey: 'companyName'},
              {header: 'Department', dataKey: 'Department'},
              {header: 'Position', dataKey: 'position'},
              {header: 'Salary', dataKey: 'salary'},
            ],
            
            });
        doc.save('test.pdf');
     
      }
    

    It was a very simple solution even tought it's not the best looking it did the job.