美文网首页
EXPORT SVG PNG PDF

EXPORT SVG PNG PDF

作者: 今天女朋友想我了没 | 来源:发表于2018-11-19 13:31 被阅读0次

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

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格式图片,所以也没有什么好的方法。

相关文章

网友评论

      本文标题:EXPORT SVG PNG PDF

      本文链接:https://www.haomeiwen.com/subject/dwgofqtx.html