Конвертировать таблицу сетки ag в файл PDF - PullRequest
Новая
       4

Конвертировать таблицу сетки ag в файл PDF

1 голос
/ 07 января 2020

Я хочу преобразовать таблицу ag-grid в pdf файл. Поэтому я использую библиотеку "jspdf". Я экспортировал таблицу ag-grid в pdf. Но я потерял стили PDF-файла. Я экспортировал PDF без структуры таблицы и любых стилей. Так как я могу решить эту проблему?

Это мой код для. html file 

        <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');
  }
}

1 Ответ

1 голос
/ 07 января 2020

Я думаю, что jsPDf не будет поддерживать изображения и стили CSS, но у меня есть работа вокруг

пример ссылки

Я пробовал это с jsPDF и dom-to-image библиотеки

...