angular - 如何使用 Angular2 创建带有图形/图表的 pdf 文件？

Question

我需要创建一个包含图形/图表的 pdf 文件并从 angular 页面下载它。我试过 jspdf 库，它可以工作，但不会呈现图表。我用 chartJS 用于在页面上创建图表。

我有一个想法，生成 HTML 页面的图像，然后将生成的图像放在 pdf 文件中。但我认为有更好的方法来解决这个问题。

我该如何解决这个问题？

Answer 1

这就是我们在我们的应用程序中所做的。使用 html2canvas 将页面的一部分转换为 Canvas ，因此我们不会错过应用于页面内容的任何样式。然后将 Canvas 转换为 pdf。您可以使用这种方法。

import * as jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

htmltoPDF()
{
       // printDiv is the html element which has to be converted to PDF
      html2canvas(document.querySelector("#printDiv")).then(canvas => {
      var pdfFile = new jsPDF('p', 'pt', [canvas.width, canvas.height]);
      var imgData  = canvas.toDataURL("image/jpeg", 1.0);
      pdfFile.addImage(imgData,0,0,canvas.width, canvas.height);
      pdfFile.save('sample.pdf');

  });

}