Generate a pdf from html page by using jspdf in angularjs - html

Question

I am trying to generate pdf from HTML table using jspdf.In this case the pdf is generated but the format is not suitable to original.
This is my code.
html code is
<div class="invoice" id="customers">
<table ng-repeat="aim in input" id="example">
<tr>
<th class="inv-left"><div align="left"><img src="./images/logo.png" alt=""></div></th>
<th class="inv-right"><div align="right"><br>
101 Convention Center<br>
dr #700, Las Vegas, <br>
NV - 89019
</div></th>
</tr>
<tr >
<th><div cg-busy="{promise:viewPromise}" align="left">
<b>Invoiced to</b><br>
{{aim.user.username}}<br>
{{aim.vendor.address}}
</div></th>
<th class="inv-right">
<div align="right"><b>INVOICE</b><br>
Invoice ID: {{aim.invoiceId}}<br>
Invoice Date: {{aim.invoiceDate.date| dateFormat | date:'MM-dd-yyyy'}}<br>
Due Date: {{aim.dueDate.date| dateFormat | date:'MM-dd-yyyy'}}
</div></th>
</tr>
<div class="invoice-content clearfix" cg-busy="{promise:viewPromise}" >
<tr>
<td class="inv-thours">Total Hours</td>
<td align="center">{{aim.totalHours}}</td>
</tr>
<tr>
<td class="inv-rate">Rate</td>
<td align="center">{{aim.billRate}}</td>
</tr>
<tr>
<td class="inv-rate">Amount</td>
<td align="center">{{(aim.totalHours) * (aim.billRate)}}</td>
</tr>
<tr>
<td class="inv-thours">totalExpenses</td>
<td align="center">{{aim.totalExpenses}}</td>
</tr>
<tr>
<td class="inv-thours">Total Amount</td>
<td align="center">{{aim.amount}}</td>
</tr>
<tr>
<td>
</td>
<td ng-if="aim.status === 'UNCONFIRMED'">
<div align="right" style="margin-right:10px;"><input type="submit" value="Confirm" data-ng-click="confirmStatus(aim)"> |
<button onclick="goBack()">Cancel</button></div>
</td>
<td ng-if="aim.status === 'CONFIRMED'">
<div align="right" style="margin-right:10px;">
<button onclick="goBack()">BACK</button></div>
</td>
<td ng-if="!(aim.status === 'UNCONFIRMED') && !(aim.status === 'CONFIRMED')">
<button onclick="javascript:demoFromHTML();">PDF</button>
</td>
</tr>
</table>
<script type="text/javascript" src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script>
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
var imgData = '.............';
pdf.setFontSize(40);
pdf.addImage(imgData, 'PNG', 12, 30, 130, 40);
pdf.cellInitialize();
pdf.setFontSize(10);
$.each($('#customers tr'), function (i, row) {
$.each($(row).find("th"), function (j, cell) {
var txt = $(cell).text();
var width = (j == 4) ? 300 : 300; //make with column smaller
pdf.cell(10, 30, width, 70, txt, i);
});
$.each($(row).find("td"), function (j, cell) {
var txt = $(cell).text().trim() || " ";
var width = (j == 4) ? 200 : 300; //make with column smaller
pdf.cell(10, 50, width, 30, txt, i);
});
});
pdf.save('sample-file.pdf');
}
I whant to generate pdf to this formate
http://i.stack.imgur.com/nrR7l.png
but generate pdf formate is
http://i.stack.imgur.com/DGSxE.png
please help me to this problem.
Thank you.

Answer 1

I think CSS is missing in your generated PDF, and found this,
github issue link
diegocr commented on 25 Sep 2014
I'm afraid the fromHTML plugin is kinda limited when it comes to support css styles. Also, we have an addSVG plugin to deal with SVG elements, but the fromHTML does not uses it. So, no, the issue isn't Angular, you may could use the new addHTML (#270) but i dunno if that will deal with SVG. (html2canvas, that is)