Angular html to pdf问题

Question

我正在将我的角度html模板转换为pdf，但生成的pdf是完全空白的。我用jspdf和html2canvas来生成pdf。

  openPDF() {
    let DATA = document.getElementById('print-paper');
    if (!DATA) {
      return;
    }
    html2canvas(DATA).then((canvas) => {
      let imgWidth = 208;
      let pageHeight = 295;
      let imgHeight = (canvas.height * imgWidth) / canvas.width;
      let heightLeft = imgHeight;

      const contentDataURL = canvas.toDataURL('image/png');
      console.log(canvas, 'data url');
      let pdf = new jsPDF('p', 'mm', 'a4'); // A4 size page of PDF
      let position = 0;
      pdf.addImage(contentDataURL, 'PNG', 0, 0, imgWidth, imgHeight);
      pdf.save('MYPdf.pdf');
    });
  }

以上是生成pdf的方法。如果我在pdf.addImage中输入-100而不是0，我会得到一些pdf格式的内容，而对于任何其他值，它都是空的。

下面是angular的html模板。

<div class="col-md-12" id="print-paper">
  <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-10"></div>
    <div class="col-md-12">
      <ng-container *ngFor="let question of formattedQuestions">
        <app-questions [question]="question"></app-questions>
      </ng-container>
    </div>
  </div>
</div>

// App问题组件

<div *ngFor="let answer of question.answers" class="form-check">
  <input
    class="form-check-input"
    type="checkbox"
    id="{{ answer._id }}"
    [checked]="answer.marked"
    disabled
  />
  <label class="form-check-label" for="{{ answer._id }}">
    {{ answer.answer }}
  </label>
  <span class="text-green" *ngIf="answer.correct">(correct)</span>
</div>

Answer 1

您可以尝试使用DATA的innerHTML属性来检索内容的实际HTML字符串，而不是getElementById返回的HTMLElement对象

但是，我建议使用另一种模板机制来管理您的样式属性。