如何使用jspdf.js正确打印HTML表格？

Question

here is what i am trying to achieve, i trying to print a html table that included HTML table inside too loop my detail (i have header and detail) data. But when i use jspdf.js to print my HTML table, the table in the pdf is broken, is not look like the HTML, the looping table inside the main table is messy, look like it won't create the insider table. How to print the table inside table properly?

here is my HTML look like

index.html

    <div id="customers">
    <div class="table-responsive">
        <table id="tbl" class="table table-hover">
            <thead>
                <tr>
                    <th style="background-color: #928989; color; white;">No BPS</th>
                    <th style="background-color: #928989; color; white;">Tanggal BPS</th>
                    <th style="background-color: #928989; color; white;">Tanggal Input</th>
                    <th style="background-color: #928989; color; white;">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat-start="listLaporanRetur in listLaporanReturs | limitTo:quantity">
                    <td class="btn btn-mini btn-primary pull-center">BPXXXXXXX</td>
                    <td>2016-06-22</td>
                    <td>2016-06-22</td>
                    <td>SENT</td>
                </tr>
                <tr ng-repeat-end="">
                <td colspan="10" style="padding: 0">
                  <div>
                    <table class="table table-bordered table-hover">
                        <tr>
                            <td style="background-color: #80A3C1;">Kode Barang</td>
                            <td style="background-color: #80A3C1;">Qty</td>
                            <td style="background-color: #80A3C1;">Merk</td>
                            <td style="background-color: #80A3C1;">Hasil</td>
                        </tr> 
                        <tr ng-repeat-start="details in listLaporanRetur.returDetailList">
                            <td>STUFFID1</td>
                            <td>10</td>
                            <td>APPLE</td>
                            <td>BOOM</td>
                        </tr>
                  <tr>
                    <td>STUFFID2</td>
                            <td>40</td>
                            <td>SONY</td>
                            <td>BREAK</td>
                  </tr>
                        <tr ng-repeat-end=""></tr>
                    </table>

                  </div>
                </td>

                </tr>
            </tbody>
        </table>
    </div>
</div>
<button onclick="javascript:demoFromHTML();">PDF</button>

then here is my javascript

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);
}

here is my jsfiddle http://jsfiddle.net/ugD5L/126/

how to print the table properly so i don't have to get messy table in the pdf? it's better if you guys can show me with jsfiddle example

Answer 1

As Mentioned in the one of answer nested table is not supported JsPDF so far, but if you can modify your html bit (if possible) then you can resolve your issue.

    <tr ng-repeat-end="" class="table table-bordered table-hover">

                        <td style="background-color: #80A3C1;">Kode Barang</td>
                        <td style="background-color: #80A3C1;">Qty</td>
                        <td style="background-color: #80A3C1;">Merk</td>
                        <td style="background-color: #80A3C1;">Hasil</td>
                    </tr> 

Demo