jspdf üstbilgisinin birden fazla sayfayı tekrar etmesi gerekiyor

Question

jquery script ve jspdf.debug.js dosyası ile jspdf kodunu özümseyim. Çok büyük bir html tablomuz var (açısal yineleme) ve birçok sayfayı tekrar ediyor. jspdf tablonun üstbilgisini güzel bir şekilde tekrarlamak için yeterince akıllıdır, fakat aynı zamanda her sayfada tekrarlanmayan bazı fatura bilgileri de vardır, sadece birincisi. Baska öneri? Bir yerde jquery'yi değiştirmem gerektiğini farz ediyorum ama nasıl bir ipucu yok.

GÜNCELLEME:

 <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

jsPDF motoru bu etiketi okuma ve her sayfanın üst eklemek edilir html bir header etiketi ekleyerek: BURAYA KADAR BENİM HTML KOD IS.

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>

çek dışarı <header>Awsome Header!!!</header>