将流程图保存为图像或 pdf

我正在尝试将流程图保存为图像并最终保存为 pdf，但不太清楚如何保存。

网上我看到我可以做

canvas.toDataURL("image/png")

但问题是我首先如何获取画布，示例说要使用

document.getElementById("canvas");

但对于我的代码，我使用的是 id="placeholder" 的 div （每个 flot 示例），并且我的 html 中没有任何带有 canvas 标签的内容，这似乎不起作用。我的 flot javascript 看起来像

$.plot($("#placeholder"), [ d1, d2, d3 ], { series: {
          lines: { show:false },
          bars: { show: true, barWidth: 0.6, horizontal:true } }  });

有没有人有一个工作示例，可以绘制流程图，然后有一个按钮可以保存/查看为图像或 pdf？

有几个问题已经回答了这个问题，但据我所知，它们缺少一些关键细节——我很抱歉对此过于关注。

您不会喜欢 flot v 0.7 解决方案。标签不在画布上，它们是位于画布周围的 HTML 元素。因此，忘记将它们写入您的图像，这不会发生在 flot 上。

如果你真的很热衷，你需要做的是获取最新版本的flotgithub https://raw.github.com/flot/flot/master/jquery.flot.js将标签写入画布（这意味着您将无法对它们进行超出基础的样式设置 - 即没有 CSS 并且不能将它们链接），然后就可以了（并且不要忘记查看新的API.txt https://github.com/flot/flot/blob/master/API.txt）。如果你需要获取画布，flot 提供了一个方法：

var plot = $.plot($("#placeholder"), [ d1, d2, d3 ], { series: {
          lines: { show:false },
          bars: { show: true, barWidth: 0.6, horizontal:true } }  });
var ctx = plot.getCanvas();

//do whatever with ctx.toDataURL("image/png")

我在这里真正建议的唯一更改是将 flot 升级到最新（未发布）版本。