JSPDF爲什麼我在pdf中獲得垂直結果？

Question

我正在使用Jspdf庫從HTML獲取結果到pdf。所以在我的情況下，爲什麼我得到這個垂直不水平的結果？ 我的HTML模板代碼是

<table id="customers" class="table-wide">'; 
htmlStr += '<thead></thead>'; 
htmlStr += '<tbody></tbody>'; 
htmlStr += '</table>'; 

而且我得到這個結果在for循環，並從ID

for(var i = 0; i < features.length; ++i) 
    { 
     if(features[i].geometry != null){ 
      var data = features[i].attributes.data; 
      tr = $('<tr></tr>'); 

      layer.fields.each(function(field) { 
       var td = $('<td></td>'); 
       if(data[field.id] != null)td.text(data[field.id]); 
       //console.log(td); 
       console.log(JSON.stringify(data[2353])); 
       tr.append(td); 


      } 

而對於代碼生成我做這樣得到。

var pdf = new jsPDF('p', 'pt', 'letter'); 
      source = $('#customers')[0]; 

      specialElementHandlers = { 
       '#bypassme': function (element, renderer) { 
        return true 
       } 
      }; 
      margins = { 
       top: 80, 
       bottom: 60, 
       left: 40, 
       width: 522 
      }; 

      pdf.fromHTML(
       source, 
       margins.left, 
       margins.top, { 
        'width': margins.width, // max width of content on PDF 
        'elementHandlers': specialElementHandlers 
       }, 


       function (dispose) { 
        // pdf.save('Test.pdf'); 
       }); 
      pdf.output('dataurlnewwindow'); 
     } 


        // pdf.save('Test.pdf'); 
       }); 
      pdf.output('dataurlnewwindow'); 
     } 

Answer 1

裹的內容，以在容器內被導出。並確保您的表格生成正確

這裏#content是容器。定位您的容器的內部HTML內容。

<div id="content"> 
 

 
    <p>This is a demo for exporting PDF from html using jsPDF. 
 
    </p> 
 
    <br> 
 

 
    <table id="demo" class="table table-bordered"> 
 
    <thead> 
 
     <tr> 
 
     <th>Serial Number</th> 
 
     <th>Name</th> 
 
     <th>Percentile</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>James</td> 
 
     <td>8.9</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2</td> 
 
     <td>Harry</td> 
 
     <td>7.6</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 

 
    <div> 
 
    <button class="btn" id="export">Save</button> 
 
    </div> 
 

 

 
</div>

//Html source 
 
var source = document.getElementById('content').innerHTML; 
 

 
var margins = { 
 
    top: 10, 
 
    bottom: 10, 
 
    left: 10, 
 
    width: 700 
 
}; 
 

 
doc.fromHTML(
 
    source, // HTML string or DOM elem ref. 
 
    margins.left, 
 
    margins.top, { 
 
    'width': margins.width, 
 
    '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 
 
    doc.save('Test.pdf'); 
 
    }, margins);

這裏指的更詳細的實施https://jsfiddle.net/Purushoth/bor1nggb/

也爲表導出你可以使用jsPDF-Autotable插件。 以下是定製表格的更多示例。 https://simonbengtsson.github.io/jsPDF-AutoTable/