JSPDFなぜ私はこの結果をpdfで知っていますか？

Question

私はJspdfライブラリを使用してHTMLからpdfへの結果を取得しています。だから私の場合、なぜ私はこの結果を水平ではなく垂直にしていますか？ 私のHTMLテンプレートコードは

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

であり、私はループのために、この中で、この結果を取得し、

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


      } 

とコード生成のために、私はこのようにやっているID

から取得しています。

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

あなたがjsPDF-Autotableプラグインを使用することができますエクスポートテーブルのためにも、より詳細な実施のためにここにhttps://jsfiddle.net/Purushoth/bor1nggb/

を参照してください。 ここでは、テーブルをカスタマイズするための例を示します。 https://simonbengtsson.github.io/jsPDF-AutoTable/