FLOT数据作为图像写入PDF

我正在使用jQuery/FLOT绘制图形，我希望用户能够下载图形的PDF版本。我正在使用ColdFusion编写PDF。创建图之后，我通过ajax将图div的html发送到使用cfdocument编写pdf的CF脚本。问题是，在PDF中，它只显示轴和标签，而不是实际的图形数据。有人知道一种方法来获取在画布上动态创建的实际图像吗？FLOT数据作为图像写入PDF

来源

2010-04-15 Kelly

他们通过对下一个版本（0.8）画布文本插件添加了该支持。您可以使用该测试版：http://www.flotcharts.org/blog/2013/03/06/announcing-flot-08-beta/执行此操作后，您需要直接访问plot canvas元素并获取它作为图像，然后将图像上传到服务器并将其添加到您的PDF。 – Hoffmann 2013-03-14 16:50:48

您可以检查此答案：http://stackoverflow.com/a/30811190/1953178 – 2015-06-12 20:11:13

我不认为这已在海军报已实施尚未见http://code.google.com/p/flot/issues/detail?id=175

来源

2010-04-15 16:03:51 Tarski

感谢您的链接。我将采用cfchart和web图表XML文件 – Kelly 2010-04-15 16:09:17

退房CutyCapt（http://cutycapt.sourceforge.net/），似乎与海军报工作。

来源

2011-02-25 12:10:53 Tjo

你也可以把你的canvas的快照使用toDataURL()和替代品在img元素，PDF转换器应该能够处理：

var canvas = $("canvas.base")[0]; 
var tmpimg = canvas.toDataURL("image/png"); 
//console.log(tmpimg); 
$("body").append('<img src="'+tmpimg+'"/>');

注意，产生的图像是只是的canvas内容（即图形本身）并且不包括轴或图例。您可能必须在flot占位符中对图像进行一些棘手的替换/对齐操作，但它会为您提供一个可用的图像。

这只是对this question的接受答案的轻微重新工作，我认为这里有人可能会发现它有用。

来源

2012-10-12 19:28:49

您可以使用像phantomJS（WebKit引擎）这样的无头浏览器在服务器上呈现图表。

您只需要一个脚本获取URL并将输出呈现为控制台流的Base64编码字符串或写入图像。

据我所知，这是唯一的半浏览器独立的方式来做到这一点。

下面是phantomjs一个脚本，输出给网页的base64编码图像串：

var page = require('webpage').create(); 
var system = require('system'); 

var pageUrl = system.args[1]; 

page.viewportSize = { width: 1280, height: 720 }; 
page.open(pageUrl , function() { 
    console.log(page.renderBase64('PNG')); 
    phantom.exit(); 
});

来源

2014-02-03 14:42:55 Frank

这是实现图形或PDF图形的最稳健的方式。 htmltocanvas和canvastoimage脚本非常有限。 PhantomJS呈现包含画布的HTML，就像真正的Web浏览器一样。如果您为html-to-image/pdf设置自己的Web服务，并为要转换为图像或PDF的每个页面创建一个特殊的打印友好页面，此解决方案可能效果最佳。 – Ryan 2014-12-03 17:19:59

FLOT数据作为图像写入PDF

回答

相关问题