在D3图表中将C3图表作为pdf下载给定下载选项

Question

我正在研究成功生成C3图表的产品。但问题是我无法将这些图形下载为pdf或png。即使我不知道C3库正在提供这些功能。

如果有任何方法可以将c3图表下载为pdf或png，请建议我。我想点击按钮作为d3图表下载特定图表。提前致谢。

Answer 1

问题是这些库将图形呈现为SVG，在页面中内嵌。你需要的是一种获取渲染SVG（加上样式）的方法，然后在必要时将其转换为PNG / PDF。

如果你只想偶尔做一次，这是你可以手工完成的事情。在这个主题上，D3的创作者有一点semi-official documentation。您还可以查看these其他questions的答案。

如果您想以程序化方式进行，请在您的网站上“下载此图表”功能，有多种方法可供选择：

• 您可以使用jsdom呈现图形服务器端，保存SVG，然后使用ImageMagick之类的工具将其转换为PNG。
• PhantomJS可以呈现您的网页并截取图表的屏幕截图。这是非常相似的StackOverflow question使用PhantomJS得到了很好的答案。

Answer 2

注意：如果图表在画布上看起来正确，我认为以下内容适用于C3或任何其他图表：

我发现因为我必须支持IE 11，所以我使用“canvas-toBlob.js”和“FileSaver.js”来使用canvas将blob转换为PNG

$("#save-btn").click(function() 
{
    $("#myChart").get(0).toBlob(function(blob) 
    {
        saveAs(blob, "chart_1.png");
    });
});

https://jsfiddle.net/mfvmoy64/155