Как создать PDF из таблицы, созданной с угловым материалом 7 виртуальная прокрутка - PullRequest
Новая
       51

Как создать PDF из таблицы, созданной с угловым материалом 7 виртуальная прокрутка

0 голосов
/ 15 декабря 2018

Я хочу создать PDF очень большой HTML-таблицы.

Я использую виртуальную прокрутку углового материала 7 для создания этой таблицы.

Вот код HTML-шаблона: 

<cdk-virtual-scroll-viewport itemSize="1" class="example-viewport">
<table class="table table-bordered table-striped table-condensed" >
  <tbody id="test">
    <tr *cdkVirtualFor="let arrangement of final; let i = index" (click)="onSelected(i)" [class.selected]="selectionne[i]" class="example-item">
       <td><button mat-raised-button color="primary">No {{i+1}}</button></td>
       <td *ngFor="let element of arrangement">{{element}}</td>
    </tr>
  </tbody>
</table>

и это компонентная функция, отвечающая за создание pdf: 

exportAll(){
var data = document.getElementById('test'); 
html2canvas(data).then(canvas => {  
  // Few necessary setting options  
  var imgWidth = 208;   
  var pageHeight = 295;    
  var imgHeight = canvas.height * imgWidth / canvas.width;  
  var heightLeft = imgHeight;  
  var position = 0;

  const contentDataURL = canvas.toDataURL('image/png')  
  let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF  

  pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
  pdf.addPage();  

  pdf.save('MYPdf.pdf'); // Generated PDF   
});}

Проблема в том, что только (01) одна страница меньше 30строки созданы, а остальные строки остались нетронутыми.

Итак, эта ситуация связана с тем, что я использую виртуальную прокрутку для рендеринга таблицы?

Что я могу сделать, чтобы преобразовать всю мою таблицу в PDF?

1 Ответ

0 голосов
/ 28 января 2019

Поскольку виртуальная прокрутка просто заменяет «ngFor» на «cdkVirtualFor», вы можете создать ngTemplate , на который вы переключаетесь при печати (установите переменную / логическое значение перед функцией exportAll ()).

при просмотре ... 

<ng-container *ngIf="!print; else PRINTING"> 
   <tr *cdkVirtualFor="let arrangement of final; let i = index" ...

при печати ... 

<ng-template #PRINTING>
   <tr *ngFor="let arrangement of final; let i = index" ...
...