js操作-页面元素转canvas并打印或转成图片下载

程序员文章站 2022-05-26 22:30:21

...

接到一个需求，客户要求将一个详情表格数据（单元格存在图片）转成一个图片并下载或者直接打印的功能；

思路是这样的，有一个js文件（html2canvas.min.js）可以将指定的元素转成canvas，而casvas可以转成图片，这样就可以下载了。

打印的话使用的是js中window对象的print()方法；具体代码与效果请往下看：

页面基本布局

<!DOCTYPE html>
<html>
	<head>
		<meta name="layout" content="main">    
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
		<title></title>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/html2canvas.min.js"></script>
	</head>
	<body>
		<h1>转图片</h1>
		<input class="button" type="button" value="测试" /> 
		<div id="div2img">
			<!--startprint-->
			<table border="1" cellspacing="0" cellpadding="0" width="100%">
				<thead style="background-color: #007DDB;">
					<tr>
						<th>姓名</th>
						<th>性别</th>
						<th>年龄</th>
						<th>地址</th>
						<th>头像</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>张三</td>
						<td>男</td>
						<td>32</td>
						<td>上海</td>
						<td background="../img/timg.jpg"></td>
					</tr>
					<tr>
						<td>张三1</td>
						<td>男</td>
						<td>32</td>
						<td>上海</td>
						<td background="../img/timg.jpg"></td>
					</tr>
					<tr>
						<td>张三2</td>
						<td>男</td>
						<td>32</td>
						<td>上海</td>
						<td background="../img/timg.jpg"></td>
					</tr>
				</tbody>
			</table>
			<!--endprint-->
		</div>
		
		<script type="text/javascript">
			$(function(){
				$(".button").on("click", function(event) {    
					//这里是相关操作，请看下面的代码块
				});     
			});
		</script>
	</body>
</html>

现在基本的页面布局完成了，具体打印的代码如下

//调用html2canvas.min.js中的方法，document.getElementById("div2img")指的是要转成canvas的元素
html2canvas(document.getElementById("div2img")).then(canvas => {
						
	//创建一个打开的窗口，也就是新打开的标签页
	var mywindow = window.open("打印窗口","_blank");
						
    //给新打开的标签页添加画布内容（这里指的是id=div2img元素的内容）
	mywindow.document.body.appendChild(canvas);
	
    //焦点移到新打开的标签页
	mywindow.focus(); 

	//执行打印的方法（注意打印方法是打印的当前窗口内的元素，所以前面才新建一个窗口：print()--打印当前窗口的内容。）
	mywindow.print();
    
    //操作完成之后关闭当前标签页（点击确定或者取消都会关闭）
	mywindow.close(); 
});

转成图片下载是将canvas转成图片连接并绑定到一个可点击的标签（我用的是a标签），具体代码如下：

//调用html2canvas.min.js中的方法，document.getElementById("div2img")指的是要转成canvas的元素
html2canvas(document.getElementById("div2img")).then(canvas => {
						
	//转成图片并下载
	var domA = document.createElement("a");
    
    //设置下载下来的文件名字，默认的是“下载”
	domA.download = '钻孔详情';

    //图片连接，canvas转成的图片连接（image/png指的是图片文件格式，png可以改成jpg、jpeg）
	domA.href = canvas.toDataURL("image/png");
    
    //触发点击事件，这是真正开始下载的一步
	domA.click();
});

到这就完成了，看下效果把：（注意：我用的谷歌浏览器，其他的浏览器兼容性未测试！！！）

完成布局之后的页面是这样的：

js操作-页面元素转canvas并打印或转成图片下载