把HTML变成图片并下载到本地

最新推荐文章于 2024-07-17 16:38:37 发布

ruthy-wei

最新推荐文章于 2024-07-17 16:38:37 发布

阅读量4.7k

点赞数 2

本文链接：https://blog.csdn.net/ruthywei/article/details/73253045

版权

同学问如何把生成的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>

代码可以直接复制，粘贴，不谢，需要请拿走！

ruthy-wei

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
5
评论
把HTML变成图片并下载到本地

同学问如何把生成的HTML网页变成图片并下载到本地，去网上搜了一下，大部分都是部分代码，没有详细的源码，现把源码贴出，供大家参考。本例子是用Hbulider写的静态页面，不用再服务器运行。采用了html2canvas.js插件的方法。首先下载html2canvas.js插件，下载地址：http://download.csdn.net/download/hr541659660/94893
复制链接

扫一扫