如何使用角形材料将数据表导出为pdf

Question

我需要使用角形材料将数据表导出到Pdf文件，但我不知道该怎么做，然后伙计们引导我！

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

我的HTML Datatable代码源：

 <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仅向我显示标题为此处的图片

并且身体内容类似于：[{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…} ，{…}，{…}，{…}，{…}，{…}，{…}]

例如，第一个对象：FullName：“ Mat1”{部门名称：“ Dep1”驱动程序名称：“ Ch1 Ali”CurrentCarType：“未知”CurrentCarModelString：“自动模式”当前模特年份：2019CurrentFuelTypeEnum：“本质”燃料箱容量：50MileageFloat：713}

Answer 1

U可以一起使用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();