如何使用 angular material 将数据 table 导出为 pdf

Question

我需要使用 angular material 将我的数据 table 导出到 Pdf 文件，但我不知道我该怎么做，请大家指导我！

我尝试过使用 jsPDF，我发现它适用于静态数据，我想从我的数据中获取副本table这应该是一种方法。

我的HTML数据table代码来源：

 <div class="content-card">
            <mat-table [dataSource]="listdata" matSort class="products-table" [@animateStagger]="{value:'50'}"
                fusePerfectScrollbar>

                <!-- ID Column -->
                <ng-container matColumnDef="icon">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>Icon</mat-header-cell>
                    <mat-cell *matCellDef="let element">
                        <img src="{{element.UrlIconName}}"/>
                    </mat-cell>
                </ng-container>

                <!-- Category Column -->
                <ng-container matColumnDef="Matricule">
                    <mat-header-cell *matHeaderCellDef fxHide mat-sor   t-header fxShow.gt-md>Matricule</mat-header-cell>
                    <mat-cell *matCellDef="let element" fxHide fxShow.gt-md>
                        <p class="category text-truncate">
                            {{element.FullName}}
                        </p>
                    </mat-cell>
                </ng-container>

                <!-- Price Column -->
                <ng-container matColumnDef="Matricule2">
                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Matricule2</mat-header-cell>
                    <mat-cell *matCellDef="let element" fxHide fxShow.gt-xs>
                        <p class="price text-truncate">
                            {{element.FullName2}}
                        </p>
                    </mat-cell>
                </ng-container>

                <!-- Quantity Column -->
                <ng-container matColumnDef="Departemant">
                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Departemant</mat-header-cell>
                    <mat-cell *matCellDef="let element" fxHide fxShow.gt-sm>
                        <span>
                            {{element.DepartmentName}}
                        </span>
                    </mat-cell>
                </ng-container>
                <!-- Quantity Column -->
                <ng-container matColumnDef="Etat">
                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Etat d'inst
                    </mat-header-cell>
                    <mat-cell *matCellDef="let element" fxHide fxShow.gt-sm>

                        <p *ngIf="element.CurrentEquipmentElement; else notShow">
                            <mat-icon class="active-icon green-600 s-16">check</mat-icon>   
                        </p>
                        <ng-template #notShow>
                            <mat-icon class="active-icon red-500 s-16">close</mat-icon>
                        </ng-template>
                    </mat-cell>
                </ng-container>

               <ng-container matColumnDef="Chauffeur">
                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Chauffeur</mat-header-cell>
                    <mat-cell *matCellDef="let element" fxHide fxShow.gt-sm>
                        <span>
                            {{element.DriverName}}
                        </span>
                    </mat-cell>
                </ng-container>
  ...

                <mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>
                <mat-row *matRowDef="let row; columns: displayedColumns;" class="product" matRipple></mat-row>


            </mat-table>
            <mat-toolbar color="white" >
                <mat-toolbar-row >
                    <mat-icon  title="Export as pdf" fxFlex="10">picture_as_pdf</mat-icon>
                    <mat-paginator #paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="5" fxFlex="90"></mat-paginator>
                </mat-toolbar-row>
            </mat-toolbar>
        </div>
        <!-- / CONTENT CARD -->
    </div>

我的component.ts

 this.service.get_cars().subscribe((data)=>{
      //console.log(data);
      this.UIGestionlist = json2array(data);
 this.Listtrackigobjct = this.UIGestionlist[3];
      this.Listtrackigobjct.forEach(e=>{
this.listdata = new MatTableDataSource(this.Listtrackigobjct);
      this.listdata.sort = this.sort;
      this.listdata.paginator = this.paginator;
    });

我试过像这样使用 jspdf：

downloadPdf() {
    this.Listtrackigobjct.forEach(e=>{
      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');
  }
}

但是这里的 pdf 只显示 header 如图所示

并且 body 内容类似于：[{...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}]

例如第一个object：全名："Mat1" {部门名称："Dep1" 司机姓名："Ch1 Ali" 当前车型："Unknown" CurrentCarModelString："Autre Modèle" 当前型号年份：2019 当前燃料类型枚举："Essence" 燃料容器容量：50 里程浮动：713}

Answer 1

你可以一起使用 javascript 打字稿。 jspdf 库可以解决你的问题。将 js pdf 导入您的项目

import jsPDF from 'jspdf';
import 'jspdf-autotable';


downloadPdf() {
    var prepare=[];
    this.Listtrackigobjct.forEach(e=>{
      var tempObj =[];
      tempObj.push(e.FullName);
      tempObj.push(e.DepartmentName);
      tempObj.push( e.CurrentCarType);
      tempObj.push( e.CurrentCarModelString);
      tempObj.push( e.CurrentModelYear);
      tempObj.push(e.CurrentFuelTypeEnum);
      tempObj.push(e.FuelContainerCapacity);
      tempObj.push(e.MileageFloat);
      prepare.push(tempObj);
    });
    const doc = new jsPDF();
    doc.autoTable({
        head: [['Matricule','','Departemant','','Chauffeur','','Marque','','Modele','','Année','','Type','','Capacite','','kilometrage']],
        body: prepare
    });
    doc.save('Vehicules_List' + '.pdf');
  }
}

或者你可以使用另一种方式，就像我在 stackblitz 中编辑的那样。使用打印功能写成pdf https://stackblitz.com/edit/angular-material-table-export-excel-file-jescpr

 let printContents, popupWin;
    printContents = document.getElementById(tableId).innerHTML;
    console.log(printContents)
    popupWin = window.open('', '_blank', 'top=0,left=0,height=auto,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
  <html>
    <head>
      <title>Print tab</title>

    </head>
<body onload="window.print();window.close()"><table class="table table-bordered">${printContents}</table></body>
  </html>`
    );
    popupWin.document.close();

Answer 2

使用打字稿 jsPdf autotable

import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable'

  downloadPdf() {
    const doc = new jsPDF();
    autoTable(doc, { html: '#my_table_id' })
    doc.save('my_table.pdf')
  }

如何使用 angular material 将数据 table 导出为 pdf

How to export data table to pdf using angular material

jspdf

typescript

angular