使用jspdf從html元素生成pdf

我正在嘗試使用jsPdf（與html2canvas和canvg結合使用）將HTML dom容器的內容轉換爲PDF文件。我有一個「查看」，「下載」鏈接在下面，其中「視圖」就像是一個預覽和理想我的例子「下載」要創建一個文檔，看起來像預覽使用jspdf從html元素生成pdf

http://plnkr.co/edit/NsYkwMZeGbpNGlp8y4P0?p=preview

報告1的內容html的基本上是什麼進入製作PDF

<div ng-controller="TemplateCtrl" class="popovertemplate"> 
<b>Hello world</b> 
<div> 
<hr> 
Generating a nice document 
<hr> 
<div> 
    <table style="width:100%"> 
    <tr> 
     <th>Firstname</th> 
     <th>Lastname</th> 
     <th>Points</th> 
    </tr> 
    <tr> 
     <td>Eve</td> 
     <td>Jackson</td> 
     <td>94</td> 
    </tr> 
    </table> 
</div> 

<div ng-controller="ChordCtrl"> 
    <chord-layout chord-matrix="{{matrix}}"> 
    </chord-layout> 
</div> 

<div> 
    <svg height="100" width="100"> 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
    </svg> 
</div> 

<ul> 
    <li ng-repeat="i in getNumber(number) track by $index"> 
    <div>{{$index+1}}</div> 
    </li> 
</ul> 

<hr> 


</div> 
</div>

我有PDF的佈局麻煩，因爲整個事情是被脅迫到的圖像，因爲jsPdf無法處理表格，樣式和SVG圖表它們是我們的報告至關重要。任何建議，以改善PDF中的以下

造型
更好的方法來給DOM元素作爲輸入PDF生成器，使這整個PDF生成可以變得更好

對於jsPdf專家誰是不是太瞭解在這個例子中angularjs或其他東西的，下面的代碼來生成PDF在這裏我沒有做太清楚

app.service('PdfGenService', function(){ 
this.generatePdf = function(jQueryElement) { 
    jQueryElement.show(); 
    jQueryElement.css('background-color','white'); 
    canvg(); 
    canvg(); 
    var pdf = new jsPDF(); 
    html2canvas(jQueryElement, { 
     allowTaint: true, 
     taintTest: false, 
     onrendered: function(canvas) { 

     var imgData = canvas.toDataURL("image/jpeg"); 
     pdf.addImage(imgData, 'JPEG', 10,10,180,300); 
     pdf.save('Test.pdf'); 
     } 
    }); 


}; 
});

任何幫助表示讚賞。

來源

2014-09-24 user2789284

http://www.cloudformatter.com/CSS2Pdf使用DOM，支持所有的包含SVG圖表作爲輸出中的矢量。查看該頁面上的許多圖表演示。 – 2014-09-25 00:27:55

這看起來確實很有希望，但它看起來像是將數據發送到其服務器以準備PDF下載。你知道這是否可以做到所有客戶端？如果你知道任何使用這個的plunkr，那就太棒了。謝謝你。 – user2789284 2014-09-25 01:05:32

它使用雲中的商業格式化程序（RenderX）。他們提供免費使用該格式化服務器場。有不想要免費服務的商家提供商品。 – 2014-09-25 01:28:14