//依赖 IE9及以下不支持
Blob.js
canvas-toBlob.js
FileSaver.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="jquery-2.1.4.min.js"></script>
<script src="d3.js"></script>
<script src="Blob.js"></script>
<script src="canvas-toBlob.js"></script>
<script src="FileSaver.js"></script>
<style>
*{
padding: 0;
margin:0;
}
</style>
</head>
<body>
<a class="download" download>
下载
</a>
<script>
var height=400;
var width=400;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var data=[1,2,3,4,5,6,7,8];
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width",20)
.attr("fill","red")
.attr("x",function(e,i){
return 25*i;
})
.attr("height",function(e,i){
return e*50;
});
$(".download").click(function(){
down()
});
var down=function(){
//首先将svg专成xml文件形式
var doctype = '<?xml version="1.0" standalone="no"?>'
+ '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';
// serialize our SVG XML to a string.
var source = (new XMLSerializer()).serializeToString(d3.select('svg').node());
// create a file blob of our SVG.
var blob = new Blob([ doctype + source], { type: 'image/svg+xml;charset=utf-8' });
var url = window.URL.createObjectURL(blob);
var downloadImg=document.createElement("img");
downloadImg.src=url;
downloadImg.onload=function(){//当onload之后再画，否则导出时为空白
//2.将svg转成canvas
var canvas=document.createElement("canvas");
canvas.width=width;
canvas.height=height;
var ctx=canvas.getContext('2d');
ctx.drawImage(downloadImg,0,0);
canvas.toBlob(function(blob) {
saveAs(
blob
, "1.png"//保存文件名称
);
}, "image/png");
}
};
</script>
</body>
</html>