How to create a pdf file with graphs/chart using Angular2?

Question

I need to create a pdf file that contains graphs/charts and download it from the angular page. I tried jspdf library, it works but it does not render the charts. I use chartJS for creating the charts on the page.

I have an idea to generate an image of the HTML page then put that generated image on the pdf file. But I think there is a better way to solve this problem.

How can I solve this?

Answer 1

This is what we did in our application. used html2canvas for converting the portion of page into a canvas so we won't miss any style applied to the contents of the page. then covert the canvas to pdf. You can use this approach.

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');

  });

}