将 ag 网格表转换为 PDF 文件

Question

我想将 ag-grid 表转换为 pdf 文件。所以我使用"jspdf"库。我将 ag-grid 表导出为 pdf。但是我丢失了pdf文件的样式。我导出了没有表格结构和任何样式的pdf。那么我该如何解决这个问题呢？

这是我.html文件的代码

<button class="btn btn-primary btn-sm float-right"  (click)="downloadAsPDF()" >
Export PDF
</button>
</div>    
<div class="col-sm-12" id="pdfTable" #pdfTable>
<ag-grid-angular style="width: 100%; height: 500px; row-gap: 30px;" rowStyle="height:50px;"
class="ag-theme-balham" [rowData]="rowData" [columnDefs]="columnDefs" [enableSorting]="true"
[animateRows]="true" rowSelection="multiple" [floatingFilter]="true" [enableColResize]="true"
[gridOptions]="gridOptions" rowHeight="25">
</ag-grid-angular>
</div>

这是 .ts 文件的代码

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import * as jsPDF  from 'jspdf'; 
@Component({ 
selector: 'app-classroom',
templateUrl: './classroom.component.html',
styleUrls: ['./classroom.component.scss'],
})
export class ClassroomComponent implements OnInit {
@ViewChild('pdfTable') pdfTable: { nativeElement: any; }; 
renderer: any;
element: any;
classrooms: Classroom[];
classroom = true;
selectedClassroom: Classroom;
private gridApi;
subscription: Subscription;
frameworkComponents: any;
rowData: Array<any> = [];
columnDefs = [
{ headerName: 'Classroom Name', field: 'classroomName', width:200, filter: "agTextColumnFilter", 
filterParams: { defaultOption: "startsWith" }}, 
{ headerName: 'Create Time', field: 'createdTime', width:200, filter: "agTextColumnFilter", 
filterParams: { defaultOption: "startsWith" }}, ]
gridOptions = {
};
constructor(private classroomService: ClassroomsService,private http: HttpClient, private 
alertService: AlertService ) { }
ngOnInit() {
downloadAsPDF() {
const doc = new jsPDF();
const specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}};
const pdfTable = this.pdfTable.nativeElement;
doc.fromHTML(pdfTable.innerHTML, 9, 20, {
width: 190,
'elementHandlers': specialElementHandlers
});
doc.save('classroom report.pdf');
}
}

Answer 1

我认为jsPDf不支持图像和CSS样式，但我有一个解决方法

示例链接

我用jsPDF和dom-to-image库尝试过这个

Answer 2

pdfMake

是一个很好的库来导出 ag-Grid。

ag-Grid API 允许您遍历所有标题行和数据行，以生成将导出为 PDF 表的文档定义。

该方法可以生成要导出的列：

function getColumnsToExport() {
let columnsToExport = [];
columnApi.getAllDisplayedColumns().forEach(col => {
let pdfExportOptions = getPdfExportOptions(col.getColId());
if (pdfExportOptions && pdfExportOptions.skipColumn) {
return;
}
let headerCell = createHeaderCell(col);
columnsToExport.push(headerCell);
});
return columnsToExport;
}

和要导出的行：

function getRowsToExport(columnsToExport) {
let rowsToExport = [];
gridApi.forEachNodeAfterFilterAndSort(node => {
let rowToExport = columnsToExport.map(({ colId }) => {
let cellValue = gridApi.getValue(colId, node);
let tableCell = createTableCell(cellValue, colId);
return tableCell;
});
rowsToExport.push(rowToExport);
});
return rowsToExport;
}

有关详细信息，请参阅以下示例：

https://stackblitz.com/edit/js-ag-grid-pdf-make?file=pdfExport%2FdocDefinition.js