vue页面截图用html2canvas截图不完整有滚动条+有echarts图表时完整截图——截图保存为图片或pdf

问题

最开始需要做一个网页的截图，结果发现有滚动条怎么都截取不成功，然后各种百度到了一个办法，就是复制那个节点到body，然后在截取那个复制的节点，小页面实验了一下，成功了好开心，代码是这样的。但是，有但是o(╥﹏╥)o。(最后附完整代码)

方法1（这里示例保存为图片）

这个方法如果你没有echarts图表，是可以实现滚动条完整截图的，测试过没有问题；

	//这个是保存为图片的方法
	 function saveFile(data, filename){
          var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
          save_link.href = data;
          save_link.download = filename;
          var event = document.createEvent('MouseEvents');
          event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
          save_link.dispatchEvent(event);
      };

	  //截图的关键代码
	  let targetDom = document.getElementById('pdfContentsDiv');   //原本需要截图的div
      let clonedNode = targetDom.cloneNode(true); //复制一个
      clonedNode.setAttribute("style",`width: ${targetDom.clientHeight};height: ${targetDom.clientWidth};`);  
      document.body.appendChild(clonedNode); //放到body后面
 
	 html2Canvas(clonedNode, {  
	          allowTaint: true,  
	          taintTest: false,  
	      }).then(function (canvas) {
	      	//这里保存为图片或保存到pdf的代码，这里示例保存为图片
			var pageData = canvas.toDataURL('image/jpeg', 1.0);
            saveFile(pageData.replace("image/jpeg", "image/octet-stream"),new Date().getTime()+".jpeg");
            
			document.body.removeChild(clonedNode);  //最后记得移除截图时添加的
	      })

方法二：解决页面中有echarts图表，复制后图表位置为空

然后，又开始各种尝试，在坑里面走了两天以后，最后终于发现了html2canvas截图成功的一个标准就是，外层div的高度跟里面需要截图的内容的高度一致就能完整的截图，（比如需要截图的外层div是800的高度有滚动条，里面的需要截图的内容是1800的高度，截图的时候就把1800的高度给需要截图的那个div就能完整截图），代码如下:

		//截图的关键代码
		let targetDom = document.getElementById('pdfContentsDiv'); //需要截图的div
		let domScrollHeight=targetDom.scrollHeight;  //获取滚动的高度
		targetDom.setAttribute("style",`height: ${domScrollHeight}px;`);  // 把高度赋值给需要截图的那个div
		
		html2Canvas(targetDom , {  
	          allowTaint: true,  
	          taintTest: false,  
	      }).then(function (canvas) {
	      	//这里是保存为图片或保存到pdf的代码，最后有保存为pdf的完整代码。
			...
			...
			targetDom.setAttribute("style",`height: 800px;`); //截图完成后最后记得把高度恢复
	      })

总结

各种测试发现，截图成功的标准就是，把内层所有div的高度加起来（scrollHeight高度），给外层那个截图的div，就能把有滚动条的完整截图了。

完整步骤代码

安装html2canvas和jspdf

npm install html2canvas jspdf --save

最后的最后，如果有帮助到大家的话，可以给我留言或者点赞哦，感觉有帮助到别人，我也会很开心~~~