Pdf comes blank after a certain page - html

Question

I am converting my html template to Pdf in Angular. But there is no problem when it is a 7 page pdf. When it's more than 7 pages, the pdf is blank. Page count is output but data is not coming. I couldn't figure out what the problem was, nor am I getting an error. I'm checking my services, my queries are dropping successfully. A front screen opens where I see my html template, and data comes in there. But after a certain page the pdf is blank.`
Thank you, for your help.
I don't get an error either, but strangely 8 pages and then the pdf is blank.
My html template ;
<mat-dialog-content class="print-content" id="print-content">
<div id="print-section">
<table *ngIf="table" class="print-table" id="print-table">
<tr>
<span *ngFor="let row of table;let indexOfCard=index;" >
<span *ngIf="indexOfCard % 2 == 0 && indexOfCard>0"><tr></tr></span>
<td class="print-card">
<table style="border-collapse: separate; border-spacing: 1px 2px;">
<tr rowspan="2" [ngClass]="getHeaderFormat(row.gender,row.departmentID)">
<td colspan="1" > {{row.groupName}} - {{row.shippingCode.toString().padStart(5, "0")}}</td>
<td colspan="6" [ngClass]="getHeaderFormat(row.gender,row.departmentID)"> {{row.staffName}}</td>
</tr>
<tr >
<td colspan="3" [ngClass]="getHeaderFormat(row.gender,row.departmentID)">{{row.departmentName}} {{row.titleName}} {{row.genderName}}</td>
<td colspan="2" [ngClass]="getHeaderFormat(row.gender,row.departmentID)" align="right"> {{row.staffID}}</td>
</tr>
<tr>
<td colspan="2" [ngClass]="getHeaderFormat(row.gender,row.departmentID)">{{row.stationInfo}} {{row.stationName}}</td>
</tr>
<tr>
<td colspan="3">
<table class="report-cell">
<tr *ngFor="let detailList of row.detailList;let indexOfelement=index;">
<ng-container *ngIf="indexOfelement<8 && detailList.quantity>0">
<td [ngClass]="getCellFormat(row.gender,1,row.departmentID)"> {{detailList.generic}}</td>
<td [ngClass]="getCellFormat(row.gender,2,row.departmentID)"> {{detailList.size}}</td>
<td [ngClass]="getCellFormat(row.gender,3,row.departmentID)"> {{detailList.quantity}} Adet</td>
</ng-container>
<span *ngIf="indexOfelement<8 && detailList.quantity<1">
<td [ngClass]="getCellFormat(row.gender,1,row.departmentID)"> </td>
<td [ngClass]="getCellFormat(row.gender,2,row.departmentID)"> </td>
<td [ngClass]="getCellFormat(row.gender,3,row.departmentID)"> </td>
</span>
</tr>
</table>
</td>
<td style="border-left: 1px solid #ddd; padding-left: 10px; vertical-align: top;">
<table class="report-cell">
<ng-container *ngFor="let detailList of row.detailList;let indexOfelement=index;">
<tr *ngIf="indexOfelement>7 && detailList.quantity>0">
<td [ngClass]="getCellFormat(row.gender,1,row.departmentID)"> {{detailList.generic}}</td>
<td [ngClass]="getCellFormat(row.gender,2,row.departmentID)"> {{detailList.size}}</td>
<td [ngClass]="getCellFormat(row.gender,3,row.departmentID)"> {{detailList.quantity}} Adet</td>
</tr>
</ng-container>
</table>
</td>
</tr>
<tr>
<td style="background-color: rgb(252, 252, 252); vertical-align: bottom;"> <img src="./assets/img/thyLogo.jpg" width="50" height="50"/></td>
<td colspan="6">Toplam : {{getTotal(row.detailList)}} Adet</td>
</tr>
</table>
</td>
</span>
</tr>
</table>
---> Html to pdf converter function in Angular
pdfPrint() {
this.exportAsService.save({ type: 'pdf', elementId: 'print-table',options: { jsPDF: {orientation: 'landscape'} }}, this.filename).subscribe(() => {
});
}