javascript - 如何使用 Highcharts 和可滚动数据将页面内容导出为 jpg 或 pdf？

Question

我有一个包含一些数据和一些 Highcharts 的页面。 Highcharts 有一些很棒的功能可以将图表导出为图像。如何包含要与图表一起导出的表格或 div 的内容，以便有一个包含图表和数据的大图像或 pdf？到目前为止我已经尝试过的，没有一个是理想的，是:

html2canvas，似乎是最好的解决方案，但似乎不包括 Highcarts。也许我做错了什么，因为文档看起来不太好，而且我无法从 Goggling 中找到任何包含图表的好例子。

我遇到的第二个最佳解决方案是将数据包含在 Highcharts 中。这个例子位于: http://jsfiddle.net/highcharts/z9zXM/这可能有效，但会破坏页面上的当前格式。换句话说，这将是一个丑陋的解决方案:)。

我发现的其他解决方案与屏幕截图有关，但这不会捕获整个页面。

可能存在也可能不存在的理想解决方案是，以某种方式使用 JavaScript 将 div 或表格与 Highchart 组合成 pdf 或 jpg，这可能吗？如果可能，我在哪里可以找到示例？

Answer 1

如何将 native Highcharts 导出功能与 html2canvas 相结合？

首先，您将 Highcharts 导出到一个文件中。我猜知道获取图像必须调用的 URL 就足够了。

其次，您使用标准的 html2canvas 魔法生成没有图表的文档。 (您可能需要指定带有图表的 div 的宽度和高度，这样它就不会在导出的文件中折叠)。

最后，您使用 gd 或 imagemagick 将一个粘贴到另一个上并返回给客户端。