SVG
导出SVG我采用的是blob(binary large object),代表二进制类型的大对象,将整个SVG图像部分作为blob对象的数据,然后采用createObjectURL()
创建DOMString,然后将其写入到链接的href中。
ar svgBlob = new Blob([html],{type:"image/svg+xml"});
var svgUrl = URL.createObjectURL(svgBlob);
target.href = svgUrl;
target.download = "chart.svg";
PNG
由于canvas能够以 .png 或 .jpg 格式保存结果图像,故PNG采用的是先将SVG转化为canvas图像,然后通过canvas图像导出
ar image = new Image();
image.src = 'data:image/svg+xml;base64,'+btoa(unescape(encodeURIComponent(html)));
context.drawImage(image,0,0);
var canvasdata = canvas.toDataURL("image/png");
target.download = "chart.png";
target.href = canvasdata;
PDF导出调用了jspdf库,可以将JPG、PNG等图形插入页面之中导出PDF。
context.drawImage(image,0,0);
var canvasdata = canvas.toDataURL("image/png");
var doc = new jsPDF('l','mm',[250,350]);
doc.addImage(canvasdata,'PNG',0,0,350,250);
doc.save('chart.pdf');
由于是位图,进行放大之后就会有失真,我也尝试了能不能将SVG作为插入的元素,但jspdf库只支持JPEG格式图片,所以也没有什么好的方法。