html2svg

在项目中遇到一个问题,将html转svg,载网上找了好多资料,此处记录一下,方便自己和各位朋友以后的使用,话不多说,直接上:

html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>test</title>

<link rel="stylesheet" href="bootstrap.min.css">

扫描二维码关注公众号,回复: 248525 查看本文章

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="lodash.min.js"></script>

<script type="text/javascript" src="convert.js"></script>

<script type="text/javascript">

$(function(){

$("#testButton").click(function(){

var svg = html2svg(document.getElementById("ServiceRecommendationsDiv"));

$("#testSvg").append(svg);

})

});

</script>

</head>

<body>

<div id="ServiceRecommendationsDiv" style="border:dotted thin;  height: auto;" align="left">

<h3>Service Recommendations</h3>

<div>

<div>

<b>STAR Health Service Coordination</b>

</div>

<div>

Youth has met the criteria for Star Health Service Coordination follow-up. (STAR Health Member Services 1-866-912-6283)

</div>

<div>

<b>Psychological Testing</b>

</div>

<div>

Youth has met the criteria for Psychological Testing.  If the child has not received psychological testing in the past, make a referral for psychological testing.  (STAR Health Member Services 1-866-912-6283)

</div>

<div>

<b> Developmental Disability Specialists</b>

</div>

<div>

Youth has met the criteria for a referral to the regional Developmental Disability Specialist.

</div>

</div>

</div>

<button id="testButton" >appendSVG</button>

<div id="testSvg" ></div>

</body>

</html>

代码中标注部分用到了几个插件,一并附上

猜你喜欢

转载自1960370817.iteye.com/blog/2344315