jsPdf從隱藏html生成pdf

Question

我嘗試使用jsPdf和html2canvas從html生成pdf。

但是，當我的股利是不可見的，我得到錯誤：

IndexSizeError: Index or size is negative or greater than the allowed amount and cant create pdf.

如果我的div可見一切OK。

我該如何解決我的問題？如何從隱藏的HTML創建PDF？

我試圖做類似的東西：

$("#btn").click(function() { 
 
    var pdf = new jsPDF('p', 'pt', 'letter'); 
 
    pdf.addHTML($('#testDiv')[0], function() { 
 
    pdf.save('PdfFile.pdf'); 
 
    }); 
 
});

#testDiv { 
 
    position: absolute; 
 
    left: -9999px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="testDiv" style="display: none"> 
 
    <p>Some text to pdf</p> 
 
</div>

但我得到的PDF與黑色區域，這一切。

加入我的代碼以CSS：

<div id="template_invoice"> 
    <div id="first_head"> 
     <div id="logo_invoice"> 
      <img src="logo.PNG" width="200px"> 
     </div> 
     <div id="main_header_info">hth</div> 
    </div> 
    <div class="clearFix"></div> 
</div> 

<style> 
    html{ 
     background: #fff !important; 
    } 
    #first_head,#second_head,#content_invoice{ 
     width: 100%; 
    } 
    #logo_invoice, #main_header_info,#lead_address,#lead_invoice_info{ 
     width: 50%; 
     float:left; 
    } 
    .clearFix{ 
     float:none; 
     clear:both; 
    } 
    #second_head{ 
     margin-top: 100px; 
    } 
    #template_invoice{ 
     margin: 0 auto; 
     width: 1170px; 
    } 
    #template_invoice{ 
     visibility: hidden; 
     width: 0px; 
     height: 0px; 
    } 
    </style> 

    <script> 


function demoFromHTML() { 
     var pdf = new jsPDF('p', 'pt', 'letter'); 
     source = $('#template_invoice')[0]; 
     specialElementHandlers = { 
      '#bypassme': function (element, renderer) { 
       return true 
      } 
     }; 
     margins = { 
      top: 10, 
      bottom: 10, 
      left: 10 
     }; 
     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) { 
        pdf.save('Test.pdf'); 
       }, margins); 
    } 
</script> 

Answer 1

試試這個CSS：

#testDiv{ 
    visibility:hidden; 
    height:0px; 
} 

希望它會工作。

我試過這個，它的工作原理。

腳本

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

HTML

<div id="customers"> 
    <table id="tab_customers" class="table table-striped"> 
     <colgroup> 
      <col width="20%"> 
       <col width="20%"> 
        <col width="20%"> 
         <col width="20%"> 
     </colgroup> 
     <thead> 
      <tr class='warning'> 
       <th>Country</th> 
       <th>Population</th> 
       <th>Date</th> 
       <th>Age</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Chinna</td> 
       <td>1,363,480,000</td> 
       <td>March 24, 2014</td> 
       <td>19.1</td> 
      </tr> 
      <tr> 
       <td>India</td> 
       <td>1,241,900,000</td> 
       <td>March 24, 2014</td> 
       <td>17.4</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> 
<button onclick="javascript:demoFromHTML();">PDF</button> 

CSS

#customers{ 
    visibility:hidden; 
    height:0px; 
}