在angularjs中使用jspdf從html頁面生成PDF

我正嘗試使用jspdf生成來自HTML表格的pdf。在這種情況下生成pdf，但格式不適合原始格式。這是我的代碼。 HTML代碼在angularjs中使用jspdf從html頁面生成PDF

<div class="invoice" id="customers"> 
<table ng-repeat="aim in input" id="example"> 
    <tr> 
     <th class="inv-left"><div align="left"><img src="./images/logo.png" alt=""></div></th> 
    <th class="inv-right"><div align="right"><br> 
     101 Convention Center<br> 
     dr #700, Las Vegas, <br> 
     NV - 89019 
    </div></th> 
    </tr> 
    <tr > 
     <th><div cg-busy="{promise:viewPromise}" align="left">   
     <b>Invoiced to</b><br>    
     {{aim.user.username}}<br> 
     {{aim.vendor.address}} 
    </div></th> 
    <th class="inv-right"> 
    <div align="right"><b>INVOICE</b><br> 
     Invoice ID: {{aim.invoiceId}}<br> 
     Invoice Date: {{aim.invoiceDate.date| dateFormat | date:'MM-dd-yyyy'}}<br> 
     Due Date: {{aim.dueDate.date| dateFormat | date:'MM-dd-yyyy'}} 
    </div></th> 
    </tr> 
    <div class="invoice-content clearfix" cg-busy="{promise:viewPromise}" > 
     <tr> 
      <td class="inv-thours">Total Hours</td> 
      <td align="center">{{aim.totalHours}}</td> 
     </tr> 
     <tr> 
      <td class="inv-rate">Rate</td> 
      <td align="center">{{aim.billRate}}</td> 
     </tr> 
     <tr> 
      <td class="inv-rate">Amount</td> 
      <td align="center">{{(aim.totalHours) * (aim.billRate)}}</td> 
     </tr> 
     <tr>        
      <td class="inv-thours">totalExpenses</td>  
      <td align="center">{{aim.totalExpenses}}</td>  
     </tr> 
     <tr>        
      <td class="inv-thours">Total Amount</td>  
      <td align="center">{{aim.amount}}</td> 
     </tr> 
     <tr> 
      <td> 
      </td> 
      <td ng-if="aim.status === 'UNCONFIRMED'"> 
       <div align="right" style="margin-right:10px;"><input type="submit" value="Confirm" data-ng-click="confirmStatus(aim)"> | 
        <button onclick="goBack()">Cancel</button></div> 
      </td> 
      <td ng-if="aim.status === 'CONFIRMED'"> 
       <div align="right" style="margin-right:10px;"> 
        <button onclick="goBack()">BACK</button></div> 
      </td> 
      <td ng-if="!(aim.status === 'UNCONFIRMED') && !(aim.status === 'CONFIRMED')"> 
       <button onclick="javascript:demoFromHTML();">PDF</button> 
      </td> 
     </tr> 
</table>

<script type="text/javascript" src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script> 
<script> 
function demoFromHTML() { 
    var pdf = new jsPDF('p', 'pt', 'letter'); 
    var imgData = '.............'; 
    pdf.setFontSize(40); 
    pdf.addImage(imgData, 'PNG', 12, 30, 130, 40); 
    pdf.cellInitialize(); 
    pdf.setFontSize(10); 
    $.each($('#customers tr'), function (i, row) { 
     $.each($(row).find("th"), function (j, cell) { 
      var txt = $(cell).text(); 
      var width = (j == 4) ? 300 : 300; //make with column smaller 
      pdf.cell(10, 30, width, 70, txt, i); 
     }); 
     $.each($(row).find("td"), function (j, cell) { 
      var txt = $(cell).text().trim() || " "; 
      var width = (j == 4) ? 200 : 300; //make with column smaller 
      pdf.cell(10, 50, width, 30, txt, i); 
     }); 

    }); 
    pdf.save('sample-file.pdf'); 
}

我whant生成PDF此甲 http://i.stack.imgur.com/nrR7l.png 但生成PDF甲是 http://i.stack.imgur.com/DGSxE.png 請幫我解決這個問題。謝謝。

來源

2014-10-20 srkprasad siddamsetti

我認爲CSS是在生成的PDF失蹤，發現了這個，

github issue link

diegocr評論2014年9月25日

恐怕fromHTML插件有點限制時它來支持CSS樣式。另外，我們有一個addSVG插件來處理SVG元素，但fromHTML不使用它。所以，不，這個問題不是Angular，你可以使用新的addHTML（＃270），但我不知道是否會處理SVG。（html2canvas，就是這樣）

來源

2015-10-30 04:48:34 KuN

在angularjs中使用jspdf從html頁面生成PDF

回答

相關問題