我需要使用 Angular Material 将我的数据表导出到 Pdf 文件，但我不知道我该怎么做，请大家指导我!
我尝试过使用 jsPDF，我发现它适用于静态数据，我想从我的数据表中获取一个副本，这应该是一种方法。
我的 HTML 数据表代码源:
<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>
我的组件.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” DriverName:“Ch1 Ali” CurrentCarType:“未知” CurrentCarModelString: "Autre Modèle" 当前型号年份:2019 CurrentFuelTypeEnum:“本质” 燃料容器容量:50 MileageFloat:713
最佳答案
你可以一起使用javascript typescript。 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();
关于angular - 如何使用 Angular Material 将数据表导出为pdf，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61203930/