使用flot graph创建PDF报告

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

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

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

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

Answer 1

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

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

但请注意，在这种情况下，您不会在图像中看到任何轴标签，因为它们不是在canvas上绘制的，它们是使用position:relative定位的简单

元素。 我发现这篇文章作者提供了一个Flot插件，它强制Flot在canvas上绘制文字，但我不知道它是否有效。 UPD：canvas上的绘图标签包含在即将发布的0.8版本中（参见评论）。

但是 图例也没有在canvas上绘制，它也是一个正确定位的

。 好像Flot社区中的人正试图用这个做点什么，我发现了两个拉取请求， 第一个修改核心， 另一个引入插件。 它们都没有被合并约9个月，并且它们被标记为v.9.0里程碑，这是在下一个并且没有到期日。 至少有可能克隆那些人的回购和测试他们的工作。

简历： Flot周围的很多人都关注这个问题，但遗憾的是没有稳定的，开箱即用的方式来实现这一目标 – 只有希望0.9最终有时会出现这个问题。

Answer 2

我已经把一个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小提琴

Answer 3

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

一段时间后编辑

现在有一天，为了做这个服务器端我会使用真棒幻影 。 我已经在基于flot的项目上使用了一段时间，它完美无缺。