我正在尝试为我的客户实施自动报告生成工具。 我需要创建 pdf 格式的报告，而且我非常喜欢使用 Jquery flot 创建图表。我只需要一种方法来获取 pdf 中的图表。
我尝试使用 flying saucer (xhtmlrenderer) 来捕获图形的图像，但它似乎对我没有帮助，因为图形是由 javascript 创建的。
xhtmlrenderer 可以捕获使用 javascript 创建的元素吗？
或者他们是否有任何其他可以捕获图形图像的工具？
【问题讨论】：
标签： javascript jquery pdf flot xhtmlrenderer
Flot 在 HTML5 <canvas> 元素上绘制图形。所以可能的情况如下：
toDataURL 从画布中检索图像数据，如this answer 中所述。addImage 将图像嵌入其中。但是请注意，在这种情况下，您不会在图像中看到任何轴标签，因为它们不是在画布上绘制的，它们是简单的 UPD： 在画布上绘制标签包含在即将发布的 0.8 版本（参见 cmets）。<div> 元素与 position:relative 定位。我发现this post，作者提供了一个 Flot 插件，该插件强制 Flot 在画布上绘制文本，但我不知道它是否有效。
但是2图例也没有画在画布上，它也是一个正确定位的<div>。似乎 Flot 社区的人正在尝试对此做些什么，我发现了两个拉取请求，the first 修改核心，the other 引入插件。它们都没有合并大约 9 个月，并且它们被标记为 v. 0.9 里程碑，它是在下一个之后并且没有截止日期。至少可以克隆这些人的 repos 并测试他们的工作。
简历：Flot 周围的很多人都关心这个问题，但遗憾的是还没有稳定的、开箱即用的方法来解决这个问题——只有希望 0.9 最终会有时会解决这个问题。
【讨论】：
如果您可以在服务器端执行此操作并且您使用的是基于 Unix 的系统，我会尝试wkhtmltopdf。
一段时间后编辑
现在，为了做这个服务器端，我会使用很棒的phantomjs。我在一个基于 flot 的项目上使用它已经有一段时间了，而且效果很好。
【讨论】：
我整理了一个 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');
}
});
【讨论】：
addPage函数