I am trying to use jsPdf (in conjunction with html2canvas and canvg) to get the content of a HTML dom container into a PDF file. I have a "View" and "Download" link in my example below where "View" is like a preview and ideally "Download" should create a document that looks like the preview
http://plnkr.co/edit/NsYkwMZeGbpNGlp8y4P0?p=preview
The contents of report1.html are essentially what goes into making the PDF
<div ng-controller="TemplateCtrl" class="popovertemplate">
<b>Hello world</b>
<div>
<hr>
Generating a nice document
<hr>
<div>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</div>
<div ng-controller="ChordCtrl">
<chord-layout chord-matrix="{{matrix}}">
</chord-layout>
</div>
<div>
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</div>
<ul>
<li ng-repeat="i in getNumber(number) track by $index">
<div>{{$index+1}}</div>
</li>
</ul>
<hr>
</div>
</div>
I am having trouble with the layout of the PDF since the whole thing is being coerced into an image because jsPdf could not handle tables, styles and svg charts which are essential for our reports. Any suggestions to improve the following
- Styling within the pdf
- Better ways to give the DOM element as an input to the pdf generator so that this whole pdf generation can be made better
For jsPdf experts who are not too aware of angularjs or other things in this example, the following code to generate the PDF is where I am not doing too well
app.service('PdfGenService', function(){
this.generatePdf = function(jQueryElement) {
jQueryElement.show();
jQueryElement.css('background-color','white');
canvg();
canvg();
var pdf = new jsPDF();
html2canvas(jQueryElement, {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
var imgData = canvas.toDataURL("image/jpeg");
pdf.addImage(imgData, 'JPEG', 10,10,180,300);
pdf.save('Test.pdf');
}
});
};
});
Any help is appreciated.
