9

我正在尝试为我的客户实现一个自动报告生成工具。我需要创建 pdf 格式的报告，而且我非常喜欢使用 Jquery flot 创建图表。我只需要一种方法来获取 pdf 中的图表。

我尝试使用飞碟（xhtmlrenderer）来捕获图形的图像，但它似乎对我没有帮助，因为图形是由 javascript 创建的。

xhtmlrenderer 可以捕获使用 javascript 创建的元素吗？

还是他们的任何其他可以捕获图形图像的工具？

4

3 回答 3

9

Flot 在 HTML5<canvas>元素上绘制图形。所以可能的情况可能如下：

  1. toDataURL如本答案中所述，从画布中检索图像数据。
  2. 使用jsPDF创建一个 PDF ，addImage像第一个示例一样使用将图像嵌入其中。

但是请注意，在这种情况下，您不会在图像中看到任何轴标签，因为它们不是在画布上绘制的，它们是<div>使用position:relative. 我发现这篇文章作者提供了一个 Flot 插件，它强制 Flot 在画布上绘制文本，但我不知道它是否有效。 UPD：画布上的绘图标签包含在即将发布的 0.8 版本中（见评论）。

但是2图例也没有绘制在画布上，它也是一个正确定位的<div>. 似乎 Flot 社区的人正在尝试对此做些什么，我发现了两个拉取请求，第一个修改核心，另一个引入插件。它们都没有合并大约 9 个月，并且它们被标记为 v. 0.9 里程碑，这是在下一个之后并且没有截止日期。至少可以克隆这些人的存储库并测试他们的工作。

简历： Flot 周围的许多人都关心这个问题，但遗憾的是，还没有稳定的、开箱即用的方法来解决这个问题——只是希望 0.9 最终会出现，有时会解决这个问题。

于 2013-02-03T16:51:09.973 回答
5

我已经将一个 JSFiddle 与如何使用 Flot + Html2Canvas + jsPDF 完成此操作的示例放在一起。导出的PDF包括轴、图例等：

 html2canvas($("#placeholder").get(0), {
   onrendered: function(canvas) {
     document.body.appendChild(canvas);

     var imgData = canvas.toDataURL('image/png');
     var doc = new jsPDF('landscape');

     doc.addImage(imgData, 'PNG', 10, 10, 190, 95);
     doc.save('sample-file.pdf');
   }
 });

JS小提琴

于 2014-03-27T04:12:03.697 回答
3

如果您可以在服务器端执行此操作并且您在基于 Unix 的系统上，我会尝试wkhtmltopdf。

一段时间后的编辑

现在有一天，为了做这个服务器端，我会使用很棒的phantomjs。我已经在基于 flot 的项目中使用它一段时间了，它运行良好。

于 2013-02-03T18:22:39.613 回答