title: How to export data table to pdf using angular material
body: <p>I need to export my data table to a Pdf file using angular material and I don't know how can I do it exactly then guys plz guide me!</p>
  
  <p>I have tried to use jsPDF and I found that it works on static data and I want to take a copy from my Datatable it should be a way to do that.</p>
  
  <p>my HTML Datatable code source:</p>
  
  <pre><code> &lt;div class="content-card"&gt;
              &lt;mat-table [dataSource]="listdata" matSort class="products-table" [@animateStagger]="{value:'50'}"
                  fusePerfectScrollbar&gt;
  
                  &lt;!-- ID Column --&gt;
                  &lt;ng-container matColumnDef="icon"&gt;
                      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Icon&lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let element"&gt;
                          &lt;img src="{{element.UrlIconName}}"/&gt;
                      &lt;/mat-cell&gt;
                  &lt;/ng-container&gt;
  
                  &lt;!-- Category Column --&gt;
                  &lt;ng-container matColumnDef="Matricule"&gt;
                      &lt;mat-header-cell *matHeaderCellDef fxHide mat-sor   t-header fxShow.gt-md&gt;Matricule&lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let element" fxHide fxShow.gt-md&gt;
                          &lt;p class="category text-truncate"&gt;
                              {{element.FullName}}
                          &lt;/p&gt;
                      &lt;/mat-cell&gt;
                  &lt;/ng-container&gt;
  
                  &lt;!-- Price Column --&gt;
                  &lt;ng-container matColumnDef="Matricule2"&gt;
                      &lt;mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs&gt;Matricule2&lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let element" fxHide fxShow.gt-xs&gt;
                          &lt;p class="price text-truncate"&gt;
                              {{element.FullName2}}
                          &lt;/p&gt;
                      &lt;/mat-cell&gt;
                  &lt;/ng-container&gt;
  
                  &lt;!-- Quantity Column --&gt;
                  &lt;ng-container matColumnDef="Departemant"&gt;
                      &lt;mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm&gt;Departemant&lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let element" fxHide fxShow.gt-sm&gt;
                          &lt;span&gt;
                              {{element.DepartmentName}}
                          &lt;/span&gt;
                      &lt;/mat-cell&gt;
                  &lt;/ng-container&gt;
                  &lt;!-- Quantity Column --&gt;
                  &lt;ng-container matColumnDef="Etat"&gt;
                      &lt;mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm&gt;Etat d'inst
                      &lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let element" fxHide fxShow.gt-sm&gt;
  
                          &lt;p *ngIf="element.CurrentEquipmentElement; else notShow"&gt;
                              &lt;mat-icon class="active-icon green-600 s-16"&gt;check&lt;/mat-icon&gt;   
                          &lt;/p&gt;
                          &lt;ng-template #notShow&gt;
                              &lt;mat-icon class="active-icon red-500 s-16"&gt;close&lt;/mat-icon&gt;
                          &lt;/ng-template&gt;
                      &lt;/mat-cell&gt;
                  &lt;/ng-container&gt;
  
                 &lt;ng-container matColumnDef="Chauffeur"&gt;
                      &lt;mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm&gt;Chauffeur&lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let element" fxHide fxShow.gt-sm&gt;
                          &lt;span&gt;
                              {{element.DriverName}}
                          &lt;/span&gt;
                      &lt;/mat-cell&gt;
                  &lt;/ng-container&gt;
    ...
  
                  &lt;mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"&gt;&lt;/mat-header-row&gt;
                  &lt;mat-row *matRowDef="let row; columns: displayedColumns;" class="product" matRipple&gt;&lt;/mat-row&gt;
  
  
              &lt;/mat-table&gt;
              &lt;mat-toolbar color="white" &gt;
                  &lt;mat-toolbar-row &gt;
                      &lt;mat-icon  title="Export as pdf" fxFlex="10"&gt;picture_as_pdf&lt;/mat-icon&gt;
                      &lt;mat-paginator #paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="5" fxFlex="90"&gt;&lt;/mat-paginator&gt;
                  &lt;/mat-toolbar-row&gt;
              &lt;/mat-toolbar&gt;
          &lt;/div&gt;
          &lt;!-- / CONTENT CARD --&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>My component.ts</p>
  
  <pre><code> this.service.get_cars().subscribe((data)=&gt;{
        //console.log(data);
        this.UIGestionlist = json2array(data);
   this.Listtrackigobjct = this.UIGestionlist[3];
        this.Listtrackigobjct.forEach(e=&gt;{
  this.listdata = new MatTableDataSource(this.Listtrackigobjct);
        this.listdata.sort = this.sort;
        this.listdata.paginator = this.paginator;
      });
  </code></pre>
  
  <p>I've tried using jspdf like:</p>
  
  <pre><code>downloadPdf() {
      this.Listtrackigobjct.forEach(e=&gt;{
        const tempObj = {} as ExportArray;
        tempObj.FullName = e.FullName;
        tempObj.DepartmentName = e.DepartmentName;
        tempObj.DriverName = e.DriverName;
        tempObj.CurrentCarType = e.CurrentCarType;
        tempObj.CurrentCarModelString = e.CurrentCarModelString;
        tempObj.CurrentModelYear = e.CurrentModelYear;
        tempObj.CurrentFuelTypeEnum = e.CurrentFuelTypeEnum;
        tempObj.FuelContainerCapacity = e.FuelContainerCapacity;
        tempObj.MileageFloat = e.MileageFloat;
        prepare.push(tempObj);
  
      });
      console.log(prepare);
      const doc = new jsPDF();
      doc.autoTable({
          head: [['Matricule','Departemant','Chauffeur','Marque','Modele','Année','Type','Capacite','kilometrage']],
          body: prepare
      });
      doc.save('Vehicules_List' + '.pdf');
    }
  }
  </code></pre>
  
  <p>but the pdf here just show me only the header as the picture here <a href="https://i.stack.imgur.com/C9hhb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C9hhb.png" alt="the result"></a></p>
  
  <p>and the body content is something like : [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] </p>
  
  <p>for example the first object: FullName: "Mat1"
  {DepartmentName: "Dep1"
  DriverName: "Ch1 Ali"
  CurrentCarType: "Unknown"
  CurrentCarModelString: "Autre Modèle"
  CurrentModelYear: 2019
  CurrentFuelTypeEnum: "Essence"
  FuelContainerCapacity: 50
  MileageFloat: 713}</p>