Creating PDF reports with flot graph

我想实现我的客户自动报表生成工具。 我需要创建PDF格式的报告，我在使用jQuery海军报创建图形非常舒适。 我只是需要一种方法来获取PDF里面的图。

我试着用飞碟（xhtmlrenderer）捕捉到曲线图的图像，但它似乎并没有帮助我，由JavaScript创建的图表。

xhtmlrenderer可以捕获通过JavaScript创建的元素呢？

或者是他们的任何其他工具，它可以捕捉到曲线图的图像？

Answer 1:

海军报绘制HTML5在其图表<canvas>元素。 因此，可能的情况可能如下：

1. 从帆布检索图象数据与toDataURL如描述此答案 。
2. 创建具有PDF jsPDF ，使用addImage在第一实例作为对图像嵌入到它。

但要注意，在这种情况下，你不会看到任何图像轴标签，因为它们不是在画布上绘制的，他们是简单<div>定位元素position:relative 。 我发现这个职位在这里笔者提供了一个海军报插件，迫使海军报绘制在画布上的文字，但我不知道它是否工作。 UPD：在画布上绘制标签包含在迎面而来的0.8发布（见注释）。

BUT ² 图例也没有上帆布拉伸，这也是一个正确定位<div> 好像人在海军报社会正在努力做这个事情，我已经发现了两个拉请求， 第一修改核心， 其他的引入插件。 他们都不是合并了约9个月，他们被标记为诉0.9里程碑，这是后下一个，并没有截止日期。 至少它可以克隆那些人回购和测试工作。

Answer 2:

我已经把一个用的jsfiddle如何与海军报+ 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 。

编辑了一段时间后

现在是一个天，要做到这一点的服务器端我会使用真棒phantomjs 。 我一直在使用这在海军报的基于项目的一段时间，它完美的作品。

文章来源: Creating PDF reports with flot graph