Jquery 使用jspdf从html元素生成pdf

Jquery 使用jspdf从html元素生成pdf,jquery,angularjs,svg,jspdf,Jquery,Angularjs,Svg,Jspdf,我正在尝试将jsPdf与html2canvas和canvg结合使用,以将HTMLDOM容器的内容获取到PDF文件中。在下面的示例中,我有一个查看和下载链接,其中查看类似于预览,理想情况下,下载应该创建一个类似于预览的文档 report1.html的内容本质上就是制作PDF的内容 <div ng-controller="TemplateCtrl" class="popovertemplate"> <b>Hello world</b> <div> &

我正在尝试将jsPdf与html2canvas和canvg结合使用,以将HTMLDOM容器的内容获取到PDF文件中。在下面的示例中,我有一个查看和下载链接,其中查看类似于预览,理想情况下,下载应该创建一个类似于预览的文档

report1.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>

非常感谢您的帮助。

我已经遇到了这些问题

我用它来绘制表格:

另一种选择是将HTML截图与HTML2Canvas或Casper.js一起使用

在这样的jspdf是开源的之后,您可以轻松地更改它以改进pdf的设计。在我认为你做不到这一点之后,我从来没有找到理想的解决方案

希望这能帮助你

编辑:


使用DOM,支持您请求的所有内容,包括SVG图表作为输出中的矢量。查看该页面上的许多图表演示。这看起来很有希望,但看起来它会将数据发送到他们的服务器,以准备下载pdf。你知道这是不是所有客户端都可以做到的?如果你知道任何一家plunkr公司使用了这个,那就太好了。谢谢你。它在云中使用了一个商业格式化程序RenderX。它们提供了对格式化服务器场的免费使用。对于那些不想要免费服务的人来说,有一些商业产品。是的,我找到了所有这些链接,但是没有一个能够在所有类型的DOM节点上都做得很好。不过还是谢谢你。
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');
      }
    });


};
});