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 pound) 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 /

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

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 pound) 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/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

• javascript
• jquery
• html
• pdf
• jspdf

• Align Your text to the extreme left of your file.Write CSS in-line.First check your pdf view before printing it as pdf.Put all dynamic data on the top of html and use loop like foreach before <tr>.I never worked on jspdf but i have use tcpdf many times. – Bugfixer Commented Jun 27, 2016 at 3:37
• @Bugfixer JsPDF doesn't support any of the things you've just mentioned. TCPDF is a server side option, pared with JsPDF which generates PDF on the client side with HTML5. – kazenorin Commented Jun 27, 2016 at 5:25
• this question has been asked and answered before stackoverflow./questions/19807870/… – Rachel Gallen Commented Jun 27, 2016 at 16:21
• there are demos here[simonbengtsson.github.io/jsPDF-AutoTable/] and here [ngiriraj./pages/htmltable_export/demo.php#] – Rachel Gallen Commented Jun 27, 2016 at 16:27

1 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