Dynamical multiple pages pdf export using jspdf

Question

I'm trying to export single pdf file with multiple pages and the data is feeded dynamically or from the html element using jsPdf. But i dunno whats going wrong the data is not able to render to pdf or if the page exceeds more than one page, then tha pdf is exported as blank pdf with single page.

Here is my code html

    <button mat-button (click)="exportAsPDF()">Export</button>
    <div class="page" *ngFor="let page of pages; index as i" id='pdfExport1' #pdfExport1
    [style.height]="sizePage.height + 'cm'"
    [style.width]="sizePage.width + 'cm'"
    (click)="clickPage(i)">
    <div class="content" 
      [style.paddingTop]="paddingPage.top + 'cm'"
      [style.paddingRight]="paddingPage.right + 'cm'"
      [style.paddingBottom]="paddingPage.bottom + 'cm'"
      [style.paddingLeft]="paddingPage.left + 'cm'"  
      [id]="'content-' + i" contenteditable="true"
      (input)="inputContent($event['data'], i)">
    </div>
  </div>

typescript code

  exportAsPDFDynamic()
  {
    console.log(this.pages)
    let pdf = new jsPDF('p', 'cm', 'a4'); 
    this.pages.forEach((el, index)=>{
      let idTag='content-'+ index
      let data = document.getElementById(idTag); 
      html2canvas(data).then(canvas => {
        pdf.addPage('','p')        
        const contentDataURL = canvas.toDataURL('image/png')  
        pdf.addImage(contentDataURL, 'PNG', 0, 0, 20, 31.0);  
          
      });
    })

    pdf.save('Filename.pdf');   
  }

Please help me to export the number of pages dynamically and export the pdf with multiple pages