使用flot graph创建PDF报告

Question

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

我尝试使用飞碟(xhtmlrenderer)捕获图形的图像,但它似乎没有帮助我,因为图形是由JavaScript创建的.

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

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

Answer 1

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

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

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

但是²,图例也没有在画布上绘制,它也是正确定位的<div>.好像Flot社区中的人正试图用这个做点什么,我发现了两个pull请求,第一个修改核心,另一个引入插件.他们都不是合并了约9个月,他们被标记为诉0.9里程碑,这是后下一个,并没有截止日期.至少可以克隆那些人的回购并测试他们的工作.

简历: 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小提琴