普通的svg打印
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>xy2</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="svg-wrap">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
</div>
<script type="text/javascript">
var svgXml = $('.svg-wrap').html();
var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //给图片对象写入base64编码的svg流
image.onload = function() { //使用onload是解决加载问题
canvas.width = $('.svg-wrap svg').width();
canvas.height = $('.svg-wrap svg').height();
var context = canvas.getContext('2d'); //取得画布的2d绘图上下文
context.drawImage(image, 0, 0);
var a = document.createElement('a');
a.href = canvas.toDataURL('image/png'); //将画布内的信息导出为png图片数据
a.download = "MapByMathArtSys"; //设定下载名称
a.click(); //点击触发下载
}
</script>
</body>
</html>
…待补充
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
