jspdf Header muss mehrere Seiten wiederholen

Question

Ich bin implimenting jspdf Code mit jquery Skript und jspdf.debug.js Datei. Ich habe eine sehr große HTML-Tabelle (angular ng-repeat) und es wiederholt viele Seiten. jspdf ist schlau genug, um den Header der Tabelle schön zu wiederholen, aber ich habe auch einige Rechnungsinformationen oben, die nicht jede Seite wiederholen, nur die erste. Irgendwelche Vorschläge? Ich gehe davon aus, dass ich die JQuery irgendwo ändern muss, aber keine Ahnung wie.

UPDATE: Hier ist mein HTML-Code so weit:

 <div id="content" class="modal-body" modal-transclude> 
      <header style="display:none;"> <img width="120" height="80" src="../../../../Images/Logo.png"/> </header> 

       <div id="bypassme"> 
        <button id="bypassme" onclick="Javascript:demoFromHTML();">Create PDF now 2</button> 
        <table class="pdfTable"> 
         <tr> 
          <td width="70%"> 
           <table id="content32" class="pdfTable"> 
            <tr> 
             <td><img style="width:120px; height:80px;" src="../../../../Images/ Logo.png" /></td> 
            </tr> 
            <tr> 
             <td> Phone # 123-456-789 Fax # 123-456-789</td> 
            </tr> 
           </table> 
          </td> 
          <td width="30%"> 
           <table class="pdfTable"> 
            <tr> 
             <td style="font-size:24px"> Purchase Order</td> 
            </tr> 
            <tr> 
             <td> 
              <table class="pdfTableWithBorder"> 
               <tr> 
                <th> 
                 Date 
                </th> 
                <th>P.O. No. </th> 
               </tr> 
               <tr> 
                <td style="border: 1px solid black;"> 
                 {{date | date:'MM/dd/yy'}} 
                </td> 
                <td> 
                 {{Number}} 
                </td> 
               </tr> 
              </table> 
             </td> 
            </tr> 
           </table> 
          </td> 
         </tr> 
        </table> 

        <table class="pdfTable"> 
         <tr> 
          <td width="50%"> 
           <table class="pdfTableWithBorder"> 
            <tr><th>Vendor</th> </tr> 
            <tr height="100"><td>vendor name</td></tr> 
           </table> 
          </td> 

          <td width="50%"> 
           <table class="pdfTableWithBorder"> 
            <tr><th>Ship To</th> </tr> 
            <tr height="100"> 
             <td> 
              company 
              <br />address 
              <br />city 
             </td> 
            </tr> 
           </table> 
          </td> 
         </tr> 
        </table> 
        <table class="pdfTableWithBorder"> 
         <tr> 
          <td width="40%" style="border: 1px solid black;">Container #</td> 
          <td width="40%" style="border: 1px solid black;">Bill </td> 
          <td width="10%" style="border: 1px solid black;">{{date | date:'MM/dd/yy'}}</td> 
          <td width="10%" style="border: 1px solid black;">info</td> 
         </tr> 
        </table> 
        <br /> 

       </div> 

      <table id="content2" class="pdfTable" 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.qty}}</td> 
        <td align="left">{{item.Code}}</td> 
        <td align="center">{{item.Desc}}</td> 
        <td align="center">{{item.price}}</td> 
        <td align="center">{{item.qty * item.price}}</td> 
       </tr> 
      </table> 
     </div> 


</div> 

Answer 1

durch einen header-Tag im HTML Hinzufügen des jsPDF Motor diesen Tag liest und es oben auf jeder Seite hinzufügen.

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 = document.querySelector('#customers'); 
 

 
    // 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: 40, 
 
     width: 522 
 
    }; 
 
    // 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); 
 
}

<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script> 
 
<button onclick="javascript:demoFromHTML();">PDF</button> 
 
<div id="customers"> 
 
    <header>Awsome Header!!!</header> 
 
    <table id="tab_customers" class="table table-striped"> 
 
     <colgroup> 
 
      <col width="20%"> 
 
       <col width="20%"> 
 
        <col width="20%"> 
 
         <col width="20%"> 
 
     </colgroup> 
 
     <thead> 
 
      <tbody> 
 
      <tr> 
 
       <td>United States</td> 
 
       <td>317,746,000</td> 
 
       <td>March 24, 2014</td> 
 
       <td>4.44</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Indonesia</td> 
 
       <td>249,866,000</td> 
 
       <td>July 1, 2013</td> 
 
       <td>3.49</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Brazil</td> 
 
       <td>201,032,714</td> 
 
       <td>July 1, 2013</td> 
 
       <td>2.81</td> 
 
      </tr> 
 
      <tr> 
 
       <td>United States</td> 
 
       <td>317,746,000</td> 
 
       <td>March 24, 2014</td> 
 
       <td>4.44</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Indonesia</td> 
 
       <td>249,866,000</td> 
 
       <td>July 1, 2013</td> 
 
       <td>3.49</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Brazil</td> 
 
       <td>201,032,714</td> 
 
       <td>July 1, 2013</td> 
 
       <td>2.81</td> 
 
      </tr> 
 
      <tr> 
 
       <td>United States</td> 
 
       <td>317,746,000</td> 
 
       <td>March 24, 2014</td> 
 
       <td>4.44</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Indonesia</td> 
 
       <td>249,866,000</td> 
 
       <td>July 1, 2013</td> 
 
       <td>3.49</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Brazil</td> 
 
       <td>201,032,714</td> 
 
       <td>July 1, 2013</td> 
 
       <td>2.81</td> 
 
      </tr> 
 
      <tr> 
 
       <td>United States</td> 
 
       <td>317,746,000</td> 
 
       <td>March 24, 2014</td> 
 
       <td>4.44</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Indonesia</td> 
 
       <td>249,866,000</td> 
 
       <td>July 1, 2013</td> 
 
       <td>3.49</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Brazil</td> 
 
       <td>201,032,714</td> 
 
       <td>July 1, 2013</td> 
 
       <td>2.81</td> 
 
      </tr> 
 
      <tr> 
 
       <td>United States</td> 
 
       <td>317,746,000</td> 
 
       <td>March 24, 2014</td> 
 
       <td>4.44</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Indonesia</td> 
 
       <td>249,866,000</td> 
 
       <td>July 1, 2013</td> 
 
       <td>3.49</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Brazil</td> 
 
       <td>201,032,714</td> 
 
       <td>July 1, 2013</td> 
 
       <td>2.81</td> 
 
      </tr> 
 
      <tr> 
 
       <td>United States</td> 
 
       <td>317,746,000</td> 
 
       <td>March 24, 2014</td> 
 
       <td>4.44</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Indonesia</td> 
 
       <td>249,866,000</td> 
 
       <td>July 1, 2013</td> 
 
       <td>3.49</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Brazil</td> 
 
       <td>201,032,714</td> 
 
       <td>July 1, 2013</td> 
 
       <td>2.81</td> 
 
      </tr> 
 
      <tr> 
 
       <td>United States</td> 
 
       <td>317,746,000</td> 
 
       <td>March 24, 2014</td> 
 
       <td>4.44</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Indonesia</td> 
 
       <td>249,866,000</td> 
 
       <td>July 1, 2013</td> 
 
       <td>3.49</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Brazil</td> 
 
       <td>201,032,714</td> 
 
       <td>July 1, 2013</td> 
 
       <td>2.81</td> 
 
      </tr> 
 
      <tr> 
 
       <td>United States</td> 
 
       <td>317,746,000</td> 
 
       <td>March 24, 2014</td> 
 
       <td>4.44</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Indonesia</td> 
 
       <td>249,866,000</td> 
 
       <td>July 1, 2013</td> 
 
       <td>3.49</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Brazil</td> 
 
       <td>201,032,714</td> 
 
       <td>July 1, 2013</td> 
 
       <td>2.81</td> 
 
      </tr> 
 
      <tr> 
 
       <td>United States</td> 
 
       <td>317,746,000</td> 
 
       <td>March 24, 2014</td> 
 
       <td>4.44</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Indonesia</td> 
 
       <td>249,866,000</td> 
 
       <td>July 1, 2013</td> 
 
       <td>3.49</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Brazil</td> 
 
       <td>201,032,714</td> 
 
       <td>July 1, 2013</td> 
 
       <td>2.81</td> 
 
      </tr> 
 
      <tr> 
 
       <td>United States</td> 
 
       <td>317,746,000</td> 
 
       <td>March 24, 2014</td> 
 
       <td>4.44</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Indonesia</td> 
 
       <td>249,866,000</td> 
 
       <td>July 1, 2013</td> 
 
       <td>3.49</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Brazil</td> 
 
       <td>201,032,714</td> 
 
       <td>July 1, 2013</td> 
 
       <td>2.81</td> 
 
      </tr> 
 
      <tr> 
 
       <td>United States</td> 
 
       <td>317,746,000</td> 
 
       <td>March 24, 2014</td> 
 
       <td>4.44</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Indonesia</td> 
 
       <td>249,866,000</td> 
 
       <td>July 1, 2013</td> 
 
       <td>3.49</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Brazil</td> 
 
       <td>201,032,714</td> 
 
       <td>July 1, 2013</td> 
 
       <td>2.81</td> 
 
      </tr>   <tr> 
 
       <td>United States</td> 
 
       <td>317,746,000</td> 
 
       <td>March 24, 2014</td> 
 
       <td>4.44</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Indonesia</td> 
 
       <td>249,866,000</td> 
 
       <td>July 1, 2013</td> 
 
       <td>3.49</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Brazil</td> 
 
       <td>201,032,714</td> 
 
       <td>July 1, 2013</td> 
 
       <td>2.81</td> 
 
      </tr> 
 
      <tr> 
 
       <td>United States</td> 
 
       <td>317,746,000</td> 
 
       <td>March 24, 2014</td> 
 
       <td>4.44</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Indonesia</td> 
 
       <td>249,866,000</td> 
 
       <td>July 1, 2013</td> 
 
       <td>3.49</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Brazil</td> 
 
       <td>201,032,714</td> 
 
       <td>July 1, 2013</td> 
 
       <td>2.81</td> 
 
      </tr> 
 
      <tr> 
 
       <td>United States</td> 
 
       <td>317,746,000</td> 
 
       <td>March 24, 2014</td> 
 
       <td>4.44</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Indonesia</td> 
 
       <td>249,866,000</td> 
 
       <td>July 1, 2013</td> 
 
       <td>3.49</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Brazil</td> 
 
       <td>201,032,714</td> 
 
       <td>July 1, 2013</td> 
 
       <td>2.81</td> 
 
      </tr> 
 
      <tr> 
 
       <td>United States</td> 
 
       <td>317,746,000</td> 
 
       <td>March 24, 2014</td> 
 
       <td>4.44</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Indonesia</td> 
 
       <td>249,866,000</td> 
 
       <td>July 1, 2013</td> 
 
       <td>3.49</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Brazil</td> 
 
       <td>201,032,714</td> 
 
       <td>July 1, 2013</td> 
 
       <td>2.81</td> 
 
      </tr> 
 

 
     </tbody> 
 
    </table> 
 
</div>

Check-out <header>Awsome Header!!!</header>