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

Question

Я хочу создать 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?

Answer 1

Поскольку виртуальная прокрутка просто заменяет "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" ...