js操作-页面元素转canvas并打印或转成图片下载(包含滚动条隐藏的内容)

最新推荐文章于 2024-06-24 15:03:29 发布

原创最新推荐文章于 2024-06-24 15:03:29 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

转载请标明出处！

文章标签：

#javascript #canvas #html2canvas #html打印 #html转图片下载

前端同时被 3 个专栏收录

4 篇文章

订阅专栏

jQuery

4 篇文章

订阅专栏

html+js

3 篇文章

订阅专栏

本文介绍如何使用html2canvas.min.js将含有图片的详情表格转换为图片进行下载或打印，包括解决滚动条隐藏内容的问题。

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

思路是这样的，有一个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="./jquery.min.js"></script>
		<script src="./html2canvas.min.js"></script>
		<style type="text/css">
			#div2img{
				height: 300px;
				overflow-y: auto;
			}
			#div2img table tr{
				height: 40px;
				line-height: 40px;
			}
		</style>
	</head>
	<body>
		<h1>转图片</h1>
		<input class="button" type="button" value="测试" /> 
		<div id="div2img">
			<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>
                    <!-- 这里是很多行，不过多写了，要看效果的可以多copy几次 -->
				</tbody>
			</table>
		</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();
});

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

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

打印的效果触发：

转成图片下载效果是

下载下来的图片是

至此，该需求已完成。注意这是我测试的一个demo，不是我实际应用再项目中的代码，希望对大家有所帮助！！！

2020-09-03更新

发现一个问题，就是如果元素有滚动条的情况下，截取的时候没有包含滚动条隐藏掉的那些内容；我的思路是这样的，我获取元素的可滚动高度(scrollHeight)，就是真实内容的高度（包含原来滚动条隐藏的内容），把这个高度设置给这个元素的可视高度（clientHeight）,这个时候在进行转成图片就可以了，完成这一步之后再把高度转过来就行了！具体修改内容请看下面的代码，依然是卸载按钮点击触发的事件内，代码调整如下

//获取进行下载的元素
let dom = document.getElementById('div2img');
//获取元素的真实高度（包含滚动条隐藏的内容）
let height = dom.scrollHeight;
//记录一下可视窗口高度（原有的高度样式）
let domheight = dom.clientHeight;
//设定元素的高度为真实高度
$(dom).css("height", height+"px");
html2canvas(dom,{
	height: height //canvas 窗口的高度
}).then(function(canvas) {
    //转成图片进行下载
	var domA = document.createElement("a");
	domA.download = '下载';//下载下来的图片命名
	domA.href = canvas.toDataURL("image/png");
	domA.click();
	//恢复元素的高度
	$(dom).css("height", domheight+"px");
});

最后这个示例的代码下载地址：https://download.youkuaiyun.com/download/it_java_shuai/12803858