html2canvas实现网页局部存为图片和打印_html2canvas打印网页内容

2401_84924979

于 2024-05-17 07:47:57 发布

阅读量389

点赞数 4

分类专栏：面试学习路线阿里巴巴文章标签： go 学习面试

本文链接：https://blog.csdn.net/2401_84924979/article/details/138989946

版权

面试同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

学习路线

12 篇文章 0 订阅

订阅专栏

阿里巴巴

12 篇文章 0 订阅

订阅专栏

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

<body>
<div class='person-info'>
左边的用户信息栏
</div>
<div class='record-info' id='record'>
右边的病历栏
</div>
</body>

既然是基于DOM的，那么我们需要的就是需要截图部分最外层的DOM。
先引入插件

<script src="js/html2canvas.js"></script>

然后是截图

new html2canvas(document.getElementById('record'), {
		backgroundColor: "transparent",  //png图片透明
		 allowTaint: true, //  显示图片
		 useCORS: true  //允许跨域
		}).then(canvas => {
			// canvas为转换后的Canvas对象
			 let oImg = new Image();
			 oImg.src = canvas.toDataURL();  // 导出图片
			$("img").attr("src",oImg.src);
	});

这里我将img标签地址执行了src属性赋值为截图地址，通过追踪发现，src是base64编码后的数据，
在这里插入图片描述
图片src指向了如图所示大的一大串字符。这一大串字符就是图片通过base64编码后的图片数据。这里使用截图就是用img标签将截图显示出来，由此可见，截图效果还可以，这也是以为我截图的内容基本都是纯dom结构渲染的。
在这里插入图片描述
4.下载截图
下载截图相对于来说就简单得多了

// canvas为转换后的Canvas对象
 let oImg = new Image();
oImg.src = canvas.toDataURL();  // 导出图片
// document.body.appendChild(oImg);  // 将生成的图片添加到body
$("img").attr("src",oImg.src);
var alink = document.createElement("a");		alink.setAttribute("download","下载.png");
alink.href = oImg.src;
alink.click();

就是创建一个a标签，其href指向图片地址，设置其download属性值为你想要保存的图片名字，这样就可以了。建议图片保存格式为png，至于为啥不是jpg，你自己去研究了。
如果这里无法下载的请留言。

5.局部打印
首先，如果是要打印html2canvas所截取下来的图片，方案是新打开一个窗口，将图片的src传递过去，并设置为body的背景图片。然后调用window自带的打印功能进行打印。但是，这里打印的是图片，所以如果是黑白印刷的话容易出现问题。
于是，采用第二种方案，将要打印部分dom提取出来，然后打开新的浏览器窗口，将提取出来的dom结构写入，然后再执行打印操作。

var newstr = document.getElementById("record").innerHTML;


![img](https://img-blog.csdnimg.cn/img_convert/b0e10cec07fe58a9412f6289356fde13.png)
![img](https://img-blog.csdnimg.cn/img_convert/1c0394e4c1471f591d1f11d5a7518037.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以添加戳这里获取](https://bbs.csdn.net/topics/618658159)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

2401_84924979

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
html2canvas实现网页局部存为图片和打印_html2canvas打印网页内容

首先，如果是要打印html2canvas所截取下来的图片，方案是新打开一个窗口，将图片的src传递过去，并设置为body的背景图片。这里使用截图就是用img标签将截图显示出来，由此可见，截图效果还可以，这也是以为我截图的内容基本都是纯dom结构渲染的。于是，采用第二种方案，将要打印部分dom提取出来，然后打开新的浏览器窗口，将提取出来的dom结构写入，然后再执行打印操作。这里我将img标签地址执行了src属性赋值为截图地址，通过追踪发现，src是base64编码后的数据，如果这里无法下载的请留言。
复制链接

扫一扫

专栏目录