从html到pdf的角度问题

Question

我正在将我的angular 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>

//应用程序问题组件

<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对象

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