Generate PDF from HTML using pdfMake in Angularjs

Question

I am trying to create a PDF from my HTML using pdfMake and Angular (I've also tried jsPDF and couldn't get it to work either). I tried using the following code in my Angular controller:

var blob = new Blob([document.getElementById('exportable').innerHTML])
var docDefinition = {
    content: [blob]
}
pdfMake.createPdf(docDefinition).open();

but I receive the following error:

Unrecognized document structure: {"_margin":null}".

My HTML consists of two simple tables in a div exportable.

If anyone knows a solution to this issue, or another way to get the HTML into a PDF from Angular, PLEASE help.

Any assistance is GREATLY appreciated!

Answer 1

Okay, I figured this out.

1. You will need html2canvas and pdfmake. You do NOT need to do any injection in your app.js to either, just include in your script tags

2. On the div that you want to create the PDF of, add an ID name like below:

    <div id="exportthis">
   

3. In your Angular controller use the id of the div in your call to html2canvas:

4. change the canvas to an image using toDataURL()

5. Then in your docDefinition for pdfmake assign the image to the content.

6. The completed code in your controller will look like this:

          html2canvas(document.getElementById('exportthis'), {
               onrendered: function (canvas) {
                   var data = canvas.toDataURL();
                   var docDefinition = {
                       content: [{
                           image: data,
                           width: 500,
                       }]
                   };
                   pdfMake.createPdf(docDefinition).download("Score_Details.pdf");
               }
           });
   

I hope this helps someone else. Happy coding!