Question

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

Answer 1

您可以使用无头浏览器（如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();
});

Answer 2

查看CutyCapt（http://cutycapt.sourceforge.net/），它似乎与Flot合作。

Answer 3

您还可以使用canvas拍摄toDataURL()的快照，并替换PDF转换器应该能够处理的img元素：

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

请注意，生成的图像只是 canvas内容（即图表本身），不包括轴或图例。您可能需要对flot占位符中的图像进行一些棘手的替换/对齐，但它会为您提供可用的图像。

这只是对this question接受的答案的轻微重新处理，我认为有人可能会觉得它很有用。

Answer 4

我认为这不会在flot中实现，但请参阅http://code.google.com/p/flot/issues/detail?id=175

将数据作为图像写入PDF

4 个答案: