current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 1 down vote favorite

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!

share|improve this question
up vote 7 down vote accepted

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

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

     <div id="exportthis">

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

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

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

  5. 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!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.