同学问如何把生成的HTML网页变成图片并下载到本地,去网上搜了一下,大部分都是部分代码,没有详细的源码,现把源码贴出,供大家参考。
本例子是用Hbulider写的静态页面,不用再服务器运行。采用了html2canvas.js插件的方法。首先下载html2canvas.js插件,下载地址:
http://download.csdn.net/download/hr541659660/9489386,或者去官方网站下载。
下载后的界面如下:
在dist文件夹下把html2canvas.js文件拷贝到Hbulider的js文件夹下。
HTML源码文件如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html2canvas example</title>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript">
function takeScreenshot() {
console.log('test');
html2canvas(document.getElementById('view'), {
onrendered: function(canvas) {
var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
window.location.href= imgUri; // 下载图片
},
width: 500,
height: 500//下载图片的大小
});
}
</script>
</head>
<body>
<div id="view" style="background:url(img/carousel1.jpg);">//图片地址任意本地图片即可
<table id="data" border="1px" cellpadding="10px" bordercolor="red" border="2">
<caption><h3>Employee payroll</h3></caption>
<thead>
<tr>
<th>Name</th>
<th>Salary</td>
<th>career time</th>
<th>opertion</th>
</tr>
</thead>
<tbody>
<tr>
<td>nancy</td>
<td>2000</td>
<td>2016.7</td>
<td>saler</td>
</tr>
<tr>
<td>ruthy</td>
<td>4000</td>
<td>2016.7</td>
<td> technicians</td>
</tr>
<tr>
<td>tom</td>
<td>5000</td>
<td>2013.5</td>
<td>manager</td>
</tr>
<tr>
<td>perter</td>
<td>20000</td>
<td>2011.5</td>
<td>boss</td>
</tr>
</tbody>
</table>
<input type="button" value="截图" οnclick="takeScreenshot()">
</div>
</body>
</html>
代码可以直接复制,粘贴,不谢,需要请拿走!