Question

我正在尝试使用jsPdf（与html2canvas和canvg结合使用）将HTML dom容器的内容转换为PDF文件。我在下面的示例中有一个“查看”和“下载”链接，其中“查看”就像一个预览，理想情况下，“下载”应该创建一个看起来像预览的文档

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

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>

我在处理PDF的布局时遇到了麻烦，因为整个事情都被强制转换为图像，因为jsPdf无法处理对我们的报告至关重要的表格，样式和svg图表。任何改进以下的建议

pdf中的样式
更好的方法将DOM元素作为pdf生成器的输入，以便可以更好地生成整个pdf

对于在这个例子中不太了解angularjs或其他东西的jsPdf专家，以下代码生成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');
      }
    });


};
});

感谢任何帮助。

Answer 1

我已经遇到过这些问题

我用它绘制表格：

https://github.com/Prashanth-Nelli/jsPdfTablePlugin

另一种选择是使用HTML与HTML2Canvas或Casper.js的屏幕截图。

此类jspdf是开源之后，您可以轻松更改它以改进PDF格式的设计。在我认为你不能做到这一点之后，我从来没有找到理想的解决方案。

希望这可以帮到你;）

编辑：

How to properly use jsPDF library

jsPDF can't get any styling to work

使用jspdf从html元素生成pdf

1 个答案: