【发布时间】：2014-11-19 14:01:23
【问题描述】：
我正在尝试使用 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 文件
对于 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');
}
});
};
});
感谢任何帮助。
【问题讨论】：
-
cloudformatter.com/CSS2Pdf 使用 DOM，支持您请求的所有内容，包括 SVG 图表作为基于输出的矢量。查看该页面上的许多图表演示。
-
这看起来很有希望，但看起来它会将数据发送到他们的服务器以准备下载 pdf。你知道这是否是所有客户端都可以完成的事情吗？如果您知道任何使用此功能的 plunkr，那就太好了..谢谢。
-
它使用云中的商业格式化程序 (RenderX)。他们提供免费使用该格式化服务器场。对于那些不想要免费服务的人，有一些商业产品。
标签： jquery angularjs svg jspdf