Angular 7使用html2canvas导出pdf div内容的最佳方式

Question

我在pdf中导出一个带有overflow-y的div时遇到问题；自动"；。

我正在使用html2canvas&jspdf可以做到这一点，但当我点击导出时，pdf会生成，但只包含div的可见部分。我之前看到了很多链接，带有scrollTo(0(选项，但我从未成功导出所有内容div。

我的组件是这样的：

<div id="printreport">
<app-first-part>
<app-second-part>
<app-third-part>
<app-fourth-part>
</div

有没有一种方法可以用现有的样式导出我的div(id＝"printreport"(，最好在每个部分都有中断页？也许还有其他解决方案，而不是html2canvas或jspdf？真正需要的是打印样式，而不是以pdf格式导出。

也许只是打印一些div，但在这种情况下如何保持风格？

感谢您的帮助和建议！

Jeff

Answer 1

我终于找到了一种做我想做的事的方法。这是一个对我帮助很大的链接！Html2canvas为每个div单独导出到pdf

特别是JpG的答案。

这是我的最后一个代码：

async printRapport() {
this.spinnerService.showSpinner();
const doc = new jspdf('l', 'mm', 'a4');
const options = {
pagesplit: true
};
const ids = document.querySelectorAll('[id]');
console.log(ids);
const length = ids.length;
for (let i = 0; i < length; i++) {
const bloc = document.getElementById(ids[i].id);
// excute this function then exit loop
await html2canvas(bloc, { scale: 1 }).then(function (canvas) {
doc.addImage(canvas.toDataURL('image/png'), 'JPEG', 10, 10, 277,canvas.height*0.2);
if (i < (length - 1)) {
doc.addPage();
}
});
}
// download the pdf with all charts
doc.save('rapport_' + this.detailPanier.name.replace(/s/g, '_') + '.pdf'); // Generated PDF*!/
this.spinnerService.hideSpinner();
}

您可以指出，所有要打印的div都必须在html中有一个id。

谢谢大家！再见