angularjs pdf插件_在Angularjs使用pdfMake生成HTML PDF

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!

解决方案

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

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

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

change the canvas to an image using toDataURL()

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

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!