1

我想创建一个非常大的 html 表的 pdf。

我使用 Angular Material 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？

4

1 回答 1

0

因为虚拟滚动只是将“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" ...
于 2019-01-28T05:01:12.580 回答