Как экспортировать таблицу данных в pdf используя angular материал - PullRequest
Новая
       19

Как экспортировать таблицу данных в pdf используя angular материал

0 голосов
/ 14 апреля 2020

Мне нужно экспортировать свою таблицу данных в файл PDF с использованием angular материала, и я не знаю, как я могу это сделать именно тогда, ребята, пожалуйста, помогите мне!

Я пытался использовать jsPDF и Я обнаружил, что он работает с данными о состоянии c, и я хочу взять копию из моего Datatable, это должен быть способ сделать это.

мой 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, только заголовок, как на картинке the result

, а содержание тела выглядит примерно так: [{…}, {…}, {…}, {…}, {…}, {…}, {…}, { …}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

например, первый объект: FullName: " Mat1 "{DepartmentName:" Dep1 "DriverName:" Ch1 Ali "CurrentCarType:" Unknown "CurrentCarModelString:" Autre Modèle "CurrentModelYear: 2019 CurrentFuelTypeEnum:" Сущность "FuelContainerCapacity: 50 ПробегФлот: 713}

1 Ответ

1 голос
/ 14 апреля 2020

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();
...