CODEWITHSUNDEEP
htmlangularjspdfjspdf
srkprasad siddamsetti
srkprasad siddamsetti

Reputation: 93

Generate a pdf from html page by using jspdf in angularjs

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 https://i.sstatic.net/nrR7l.png but generate pdf formate is https://i.sstatic.net/DGSxE.png please help me to this problem. Thank you.

Upvotes: 2

Views: 10522

Answers (1)

KuN
KuN

Reputation: 1211

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)

Upvotes: 1

Related Questions