Search code examples
angularjspdf-conversion

angularjs javascript - easy way to convert html webpage to pdf


Is there an easy way to convert and view as pdf from my html webpage in angularjs

example html:

<table class="table table-hover table-condensed table-bordered" style="font-size: 12px">

    <tr>
        <th align="left">Qty</th>
        <th align="left">Item</th>
        <th align="center">Description</th>
        <th align="center">Rate</th>
        <th align="center">Amount</th>
    </tr>

    <tr ng-repeat="item in items" ng-class-odd="'odd'" ng-class-even="'even'">
        <td align="left">{{item.qtyToOrder}}</td>
        <td align="left">{{item.ItemCode}}</td>
        <td align="center">{{item.Desc}}</td>
        <td align="center">{{item.price}}</td>
        <td align="center">{{item.qtyToOrder * item.price}}</td>

    </tr>
</table>

Solution

  • this jquery code actually works amazing!

    http://jsfiddle.net/NishitDhakar/ugD5L/

    function demoFromHTML() {
        var pdf = new jsPDF('p', 'pt', 'letter');
        // source can be HTML-formatted string, or a reference
        // to an actual DOM element from which the text will be scraped.
        source = $('#customers')[0];
    
        // we support special element handlers. Register them with jQuery-style 
        // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
        // There is no support for any other type of selectors 
        // (class, of compound) at this time.
        specialElementHandlers = {
            // element with id of "bypass" - jQuery style selector
            '#bypassme': function (element, renderer) {
                // true = "handled elsewhere, bypass text extraction"
                return true
            }
        };
        margins = {
            top: 80,
            bottom: 60,
            left: 10,
            width: 700
        };
        // all coords and widths are in jsPDF instance's declared units
        // 'inches' in this case
        pdf.fromHTML(
        source, // HTML string or DOM elem ref.
        margins.left, // x coord
        margins.top, { // y coord
            'width': margins.width, // max width of content on PDF
            'elementHandlers': specialElementHandlers
        },
    
        function (dispose) {
            // dispose: object with X, Y of the last line add to the PDF 
            //          this allow the insertion of new lines after html
            pdf.save('Test.pdf');
        }, margins);
    }
    

    UPDATE: I actually see jspdf is limited. selectpdf has a free nuget package you can install which seems to work well but is limited to 5 pages at a time. so if you need more than that, you can buy the api.