Wie drucke ich richtig HTML-Tabelle PDF mit jspdf.js?

Question

hier ist, was ich versuche zu erreichen, ich versuche, eine HTML-Tabelle, die HTML-Tabelle enthalten zu drucken auch meine Details (ich habe Header und Detail) Daten. Aber wenn ich jspdf.js verwende, um meine HTML-Tabelle zu drucken, ist die Tabelle in der PDF-Datei fehlerhaft, sieht nicht wie HTML aus, die Schleifen-Tabelle in der Haupttabelle ist chaotisch, sieht so aus, als würde sie die Insider-Tabelle nicht erstellen. Wie drucke ich die Tabelle in der Tabelle richtig?

hier ist mein HTML aussehen

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> 

dann hier ist mein 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); 
} 

hier ist mein jsfiddle http://jsfiddle.net/ugD5L/126/

, wie die Tabelle drucken richtig, damit ich nicht chaotisch Tisch in der PDF bekommen? es ist besser, wenn Sie mir mit jsfiddle Beispiel zeigen können

Answer 1

Wie erwähnt in der Antwort der geschachtelten Tabelle wird JsPDF bisher nicht unterstützt, aber wenn Sie Ihr HTML-Bit (wenn möglich) ändern können, dann können Sie Ihr Problem lösen.

<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