1

I want to create a pdf of a very big html table.

I make use of angular material 7 virtual scroling to create that table.

Here is the html template code :

<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>

and this is the component function in charge of creating the 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   
});}

The problem is that only (01) one page of less than 30 rows is created and the rest of the rows are left untouched.

So, is this situation due to the fact that i'm using virtual scrolling to render the table?

What can i do to convert all my table into pdf?

Cheick BOLY
  • 11
  • 3

1 Answers1

0

Because the virtual scroll is simply replacing "ngFor" with "cdkVirtualFor", you could create an ngTemplate that you switch to when printing (set a variable/boolean before your exportAll() function).

when viewing...

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

when printing...

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