JSPDF和html2canvas添加多个页面

Question

我需要在完成一页后自动添加另一页。

我还想在添加的每个页面上放置一个标题，该怎么办？ 现在只显示一页

这是我的组件TS

  @ViewChild('informeExport') informeExport:ElementRef;

  generarPDF() {

    const div = document.getElementById('informeExport');
    const options = {
      background: 'white',
      scale: 3
    };

    html2canvas(div, options).then((canvas) => {

      var img = canvas.toDataURL("image/PNG");
      var doc = new jspdf('p', 'mm', 'a4');

      // Add image Canvas to PDF
      const bufferX = 5;
      const bufferY = 5;
      const imgProps = (<any>doc).getImageProperties(img);
      const pdfWidth = doc.internal.pageSize.getWidth() - 2 * bufferX;
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
      doc.addImage(img, 'PNG', bufferX, bufferY, pdfWidth, pdfHeight, undefined, 'FAST');

      return doc;
    }).then((doc) => {
      doc.save('informe.pdf');  
    });
  }

这是我的html组件代码

    <button mat-raised-button (click)="generarPDF()">TEST</button>

    <div id="informeExport" *ngIf="!isEmpty(questions); else emptyDataBlock">
      <div *ngFor="let survey of surveysNames | keyvalue" #surveysGraphs class="questionGraph">
        <h4>{{survey.value}}</h4>
        <div>
          <canvas id="s{{survey.key}}">
          </canvas>
        </div>
      </div>
      <div *ngFor="let bloque of bloquesNames | keyvalue" #bloquesGraphs class="questionGraph">
        <h4>{{bloque.value}}</h4>

        <div>
          <canvas id="b{{bloque.key}}">
          </canvas>
        </div>
      </div>
      <div *ngFor="let question of questions | keyvalue" #questionsGraphs class="questionGraph">
        <h4>{{question.value}}</h4>

        <div *ngIf="questionsDatasets[question.key]['type'] != 'text'">
          <canvas id="q{{question.key}}">
          </canvas>
        </div>
        <div *ngIf="questionsDatasets[question.key]['type'] == 'text'">
          <div *ngFor="let respuesta of questionsDatasets[question.key]['datasets'] | keyvalue" class="textoStats">
              {{respuesta.key}}
              <ul>
                  <li *ngFor="let resp of respuesta.value">
                      {{resp}}
                  </li>
              </ul>
          </div>
        </div>
      </div>

    </div>

非常感谢您的帮助