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

2023年12月7日发(作者：)

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

简介

具体来说是一个脚本或者js插件， 该脚本允许您直接在用户浏览器上截取网页或部分网页的“内容截图”。该脚本是基于

DOM进行渲染的，所以只支持大部分的css特效，还有就是不支持跨域显示资源或者显示frame框架内容等。局限还是挺大的，但是用于普

通的页面（dom）截图真的是太方便了。

2. 引入最近有需要，做一个电子病历截图下载下来。

如下图，红色圈圈圈起来的部分是要下载的内容。

截图的内容如下。

最主要的DOM结构如下：

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

先引入插件

然后是截图

new html2canvas(mentById('record'), {

backgroundColor: "transparent", //png图片透明

allowTaint: true, // 显示图片

useCORS: true //允许跨域

}).then(canvas => {

// canvas为转换后的Canvas对象

let oImg = new Image();

= URL(); // 导出图片

$("img").attr("src",);

});

这里我将img标签地址执行了src属性赋值为截图地址，通过追踪发现，src是base64编码后的数据，

图片src指向了如图所示大的一大串字符。这一大串字符就是图片通过base64编码后的图片数据。这里使用截图就是用img标签将截图显示

出来，由此可见，截图效果还可以，这也是以为我截图的内容基本都是纯dom结构渲染的。

4.下载截图

下载截图相对于来说就简单得多了

// canvas为转换后的Canvas对象

let oImg = new Image();

= URL(); // 导出图片

// Child(oImg); // 将生成的图片添加到body

$("img").attr("src",);

var alink = Element("a"); ribute("download","下载.png");

= ;

();

就是创建一个a标签，其href指向图片地址，设置其download属性值为你想要保存的图片名字，这样就可以了。建议图片保存格式为png，

至于为啥不是jpg，你自己去研究了。

如果这里无法下载的请留言。

5.局部打印

首先，如果是要打印html2canvas所截取下来的图片，方案是新打开一个窗口，将图片的src传递过去，并设置为body的背景图片。然后

调用window自带的打印功能进行打印。但是，这里打印的是图片，所以如果是黑白印刷的话容易出现问题。

于是，采用第二种方案，将要打印部分dom提取出来，然后打开新的浏览器窗口，将提取出来的dom结构写入，然后再执行打印操作。

var newstr = mentById("record").innerHTML;

printWindow = ();

(newstr);

();

执行结果如下图所示

这里之所以没有背景色，是因为我把背景色的css提取出来了。值得注意的是，使用这种方法时，得将css写在标签内部，独立出来的css是

不能通过这种方法表现出来的。因为再获取dom时无法获取到其引用的css样式。

如果大家有更好的方法解决网页局部截图的问题，希望能分享出来，我想用更好的东西。