Question

我在应用程序中创建了很多D3图表。

但是现在我的要求是以任何格式保存D3图表，例如png / gif或pdf。

我搜索了很多，每个人都说我们可以使用画布。

任何人都可以为此提供任何示例或链接......

从概念上讲，我很清楚

使用canvg JavaScript库使用Canvas渲染SVG图像：https://github.com/gabelerner/canvg

根据以下说明从Canvas捕获编码为JPG（或PNG）的数据URI：将HTML Canvas捕获为gif / jpg / png / pdf？

如果有任何人实施了我想要的，那么请你分享代码。

Answer 1

在搜索了很多资源并尝试了很多东西之后，我找到了SaveSvgAsPng 在GitHub上。

在同一链接上的README页面上实现和使用资源非常容易。

<强>步骤

将Javascript库添加到您的项目中。
使用saveSvgAsPng调用编写函数，根据需要包含其他选项。

使用示例

saveSvgAsPng(document.getElementsByTagName("svg")[0], "plot.png");

使用d3.js的示例函数

// I have button in html with id="download"
d3.select("#download")
.on('click', function(){
    // Get the d3js SVG element and save using saveSvgAsPng.js
    saveSvgAsPng(document.getElementsByTagName("svg")[0], "plot.png", {scale: 2, backgroundColor: "#FFFFFF"});
})

对于这个例子，我的图表对于网页来说很小，所以增加了大小以便下载加倍而不是透明背景作为默认值我变为白色。

Answer 2

SaveSvgAsPng也为我工作。但是如果你想让它在IE中工作，你需要包含“canvg”并将其作为参数传递如下：

function saveAsImage(name, id) {

var svg = $('#'+id).find('svg')[0];

saveSvgAsPng(svg, name + '.png', { canvg: canvg, backgroundColor: 'white'});

}

当您的图表需要以背景保存时，

“backgroundColor”参数也很有用。

将D3图表保存为图像

2 个答案: