官网
http://html2canvas.hertzen.com/
<html>
<head>
<meta name="layout" content="main">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".example1").on("click", function() {
html2canvas(document.querySelector("#capture")).then(canvas => {
console.log(canvas.toDataURL())
document.body.appendChild(canvas)
});
});
});
</script>
</head>
<body>
<div id="capture" style="text-overflow:ellipsis;overflow:hidden;">
<table width=”80%” align=”center” border=”1″ bordercolor=”#DEDEDE” cellspacing=”0″>
<caption>
<div style=”color: #69BDFF;font-size: xx-large;font-weight: bold;”> <a href=”http://www.yaocdn.com/”
style=”text-decoration: none;color: #69BDFF;”>
YaoCDN</a><strong> 0.09元/GB</strong> </div>
<h1>无阶梯！无保底！全国最低！</h1>
</caption>
<thead>
<tr style=”background-color: #69BDFF; text-align:center;color: #FFFFFF;font-size: 32px;”>
<td>品牌</td>
<td>入门价(元/GB)</td>
<td>YaoCDN(元/GB)</td>
<td>最优价(元/GB)</td>
<td>YaoCDN(元/GB)</td>
</tr>
</thead>
<tbody style=” text-align:center;font-size: 32px;color: #000000；”>
<tr>
<td>阿里云</td>
<td>0.27</td>
<td style=”color: #FF0000;”>0.09<img src=”红色箭头.jpg” alt=”"> 67%</td>
<td>0.17</td>
<td style=”color: #FF0000;”>0.09<img src=”红色箭头.jpg” alt=”"> 48%</td>
</tr>
<tr>
<td>腾讯云</td>
<td>0.34</td>
<td style=”color: #FF0000;”>0.09<img src=”红色箭头.jpg” alt=”"> 74%</td>
<td>0.28</td>
<td style=”color: #FF0000;”>0.09<img src=”红色箭头.jpg” alt=”"> 68%</td>
</tr>
<tr>
<td>七牛</td>
<td>0.26</td>
<td style=”color: #FF0000;”>0.09<img src=”红色箭头.jpg” alt=”"> 75%</td>
<td>0.26</td>
<td style=”color: #FF0000;”>0.09<img src=”红色箭头.jpg” alt=”"> 66%</td>
</tr>
<tr>
<td>UCLOUD</td>
<td>0.34</td>
<td style=”color: #FF0000;”>0.09<img src=”红色箭头.jpg” alt=”"> 74%</td>
<td>0.20</td>
<td style=”color: #FF0000;”>0.09<img src=”红色箭头.jpg” alt=”"> 55%</td>
</tr>
<tr>
<td>金山云</td>
<td>0.36</td>
<td style=”color: #FF0000;”>0.09<img src=”红色箭头.jpg” alt=”"> 75%</td>
<td>0.26</td>
<td style=”color: #FF0000;”>0.09<img src=”红色箭头.jpg” alt=”"> 66%</td>
</tr>
<tr>
<td>又拍云</td>
<td>0.29</td>
<td style=”color: #FF0000;”>0.09<img src=”红色箭头.jpg” alt=”"> 69%</td>
<td>0.29</td>
<td style=”color: #FF0000;”>0.09<img src=”红色箭头.jpg” alt=”"> 68%</td>
</tr>
</tbody>
</table>
</div>
<input class="example1" type="button" value="button">
生成界面如下：
</body>
</html>
网友评论