2017-07-14 1 views
0

jspdfを使ってデータをフォーマットするには、第1列を太字で、第2列を通常のテキストで、pdf出力の中央に配置します。 また、私はpdfの最初の列には別の色を、2列目には別の色が必要です。jspdfを使ってデータをフォーマットするには、第1列を太字で表示しますか?

これは、色変更するには

<!DOCTYPE html> 
<html> 
<head> 
    <title>success</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript"> 
function tableToJson(table) { 
    var data = []; 

    // first row needs to be headers 
    var headers = []; 
    for (var i=0; i<table.rows[0].cells.length; i++) { 
     headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,''); 
    } 
    data.push(headers); 
    // go through cells 
    for (var i=1; i<table.rows.length; i++) { 

     var tableRow = table.rows[i]; 
     var rowData = {}; 

     for (var j=0; j<tableRow.cells.length; j++) { 

      rowData[ headers[j] ] = tableRow.cells[j].innerHTML; 

     } 

     data.push(rowData); 
    }  

    return data; 
} 
function callme(){ 
var table = tableToJson($('#table-id').get(0)); 
var doc = new jsPDF('l','pt','letter',true); 

doc.setFont("courier"); 
doc.setFontType("italic"); 
margins = { 
      top: 80, 
      bottom: 60, 
      left: 40, 
      width: 522 
     }; 
$.each(table, function(i, row){ 
    $.each(row, function(j,cell){ 

    if(j=="startdate" | j==2){ 
    doc.cell(5,20,290,20,cell,i); 
    } 
    else{ 
    doc.cell(5,20,290,20,cell,i); 
    } 

    }); 
}); 

doc.save('Safaa.pdf'); 
} 
</script> 

</head> 
<body> 
<p>form value</p> 

<div class="container" id="pdf"> 
<a href="javascript:genPDF()">Download PDF</a> 
    {{#each arrayofpromotion}}   
    <table id="table-id" class="table table-bordered"> 
    <thead> 
     <tr> 
     <th>StartDate</th> 
     <td> {{StartDate}} </td> 
     </tr> 
     <tr> 
     <th>EndDate</th> 
     <td>{{EndDate}}</td> 
     </tr> 
     <tr> 
     <th>promotionId</th> 
     <td>{{PromotionId}}</td> 
     </tr> 
     <tr> 
     <th>ArticleNo</th> 
     <td>{{ArticleNo}}</td> 
     </tr> 
     <tr> 
     <th>PromotionsubsAdjID</th> 
     <td>{{PromotionsubsAdjID}}</td> 
     </tr > 
     <tr> 
     <th>promotionNameEN</th> 
     <td>{{PromotionNameEN}}</td> 
     </tr> 
     <tr> 
     <th>promotionNameFR</th> 
     <td>{{PromotionNameFR}}</td> 
     </tr> 
     <tr> 
     <th>LedgerDesc</th> 
     <td>{{LedgerDesc}}</td> 
     </tr> 
     <tr> 
     <th>LedgerDescFR</th> 
     <td>{{LedgerDescFR}}</td> 
     </tr> 
    </thead> 
    </table> 
    {{/each}} 
    <a href="javascript:callme()">Call Me</a> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script> 
</div> 
</body> 
</html> 


[Right now i am getting this type of Output][1] 

答えて

0

NOW-私のコードです:テキストを揃えるために

doc.setFontType("bold"); 

:フォントウェイトを変更するには

doc.setTextColor(15, 15, 15); 

doc.text('your text', 150, 255, 'center'); 
+0

最初の列に太字のみを追加し、色も追加します。 –

+0

私が言及したように太字に変更し、テキストを追加してから 'doc.setFontType(" normal ");'次のテキストは正常になります。色と同じですが、色を希望どおりに変更し、テキストを追加してから黒に戻します。 –

関連する問題