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

Question

我在 pdf 中导出一个带有溢出-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 之外的另一种解决方案？ 真正需要的是用 styles 打印，不需要在 pdf 中导出。

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

感谢您的帮助和建议！

杰夫

Answer 1

我终于找到了一种方法来做我想做的事。 这是对我有很大帮助的链接！ 每个 div 的 Html2canvas 分别导出到 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。

谢谢大家！ 再见