html2canvas实现⽹页局部存为图⽚和打印
1.html2canvas.js简介
html2canvas.js具体来说是⼀个脚本或者js插件， 该脚本允许您直接在⽤户浏览器上截取⽹页或部分⽹页的“内容截图”。该脚本是基于DOM进⾏渲染的，所以只⽀持⼤部分的css特效，还有就是不⽀持跨域显⽰资源或者显⽰frame框架内容等。局限还是挺⼤的，但是⽤于普通的页⾯（dom）截图真的是太⽅便了。
2. 引⼊html2canvas.js
最近有需要，做⼀个电⼦病历截图下载下来。
如下图，红⾊圈圈圈起来的部分是要下载的内容。
截图的内容如下。
最主要的DOM结构如下：
dnf黄金增幅书<body>
<div class='person-info'>
左边的⽤户信息栏
</div>
稚子弄冰的诗意<div class='record-info' id='record'>
右边的病历栏
</div>
</body>
既然是基于DOM的，那么我们需要的就是需要截图部分最外层的DOM。
先引⼊插件
<script src="js/html2canvas.js"></script>
然后是截图
new ElementById('record'), {
backgroundColor: "transparent", //png图⽚透明
allowTaint: true, // 显⽰图⽚
useCORS: true //允许跨域
}).then(canvas => {
// canvas为转换后的Canvas对象
let oImg = new Image();
oImg.src = DataURL(); // 导出图⽚
$("img").attr("src",oImg.src);超轻粘土
});
这⾥我将img标签地址执⾏了src属性赋值为截图地址，通过追踪发现，src是base64编码后的数据，
图⽚src指向了如图所⽰⼤的⼀⼤串字符。这⼀⼤串字符就是图⽚通过base64编码后的图⽚数据。这⾥使⽤截图就是⽤img标签将截图显⽰出来，由此可见，截图效果还可以，这也是以为我截图的内容基本都是纯dom结构渲染的。
4.下载截图
下载截图相对于来说就简单得多了
// canvas为转换后的Canvas对象
苹果ios14充电提示音let oImg = new Image();
oImg.src = DataURL(); // 导出图⽚
// document.body.appendChild(oImg); // 将⽣成的图⽚添加到body
$("img").attr("src",oImg.src);
var alink = ateElement("a"); alink.setAttribute("download","下载.png");
alink.href = oImg.src;暗影之眼
alink.click();
就是创建⼀个a标签，其href指向图⽚地址，设置其download属性值为你想要保存的图⽚名字，这样就可以了。建议图⽚保存格式为png，⾄于为啥不是jpg，你⾃⼰去研究了。
如果这⾥⽆法下载的请留⾔。
5.局部打印
100平米旧墙翻新多少钱⾸先，如果是要打印html2canvas所截取下来的图⽚，⽅案是新打开⼀个窗⼝，将图⽚的src传递过去，并设置为body的背景图⽚。然后调⽤window⾃带的打印功能进⾏打印。但是，这⾥打印的是图⽚，所以如果是⿊⽩印刷的话容易出现问题。
于是，采⽤第⼆种⽅案，将要打印部分dom提取出来，然后打开新的浏览器窗⼝，将提取出来的dom结构写⼊，然后再执⾏打印操作。
var newstr = ElementById("record").innerHTML;
printWindow = window.open();
printWindow.document.write(newstr);
printWindow.print();
执⾏结果如下图所⽰
这⾥之所以没有背景⾊，是因为我把背景⾊的css提取出来了。值得注意的是，使⽤这种⽅法时，得将
css写在标签内部，独⽴出来的css是不能通过这种⽅法表现出来的。因为再获取dom时⽆法获取到其引⽤的css样式。
如果⼤家有更好的⽅法解决⽹页局部截图的问题，希望能分享出来，我想⽤更好的东西。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论