js用html2canvas.js实现包含非可视区域内容的截屏下载

由于项目开发需求，需要将表格数据以图片形式下载到本地，之前有了解到ExportPrint.js插件，可以将页面元素以图片形式下载导出，但此方法只适用于出现纵向滚动轴的页面，当有横向滚动轴时页面只会截取可视区域内容。借助网友的智慧(js截取页面内容、生成png（包括非可视区域）、下载到本地)实现了包含非可视区域内容的图片导出下载，方法如下：
一、HTML

// table内容为导出元素，该功能是用bootstrap-table动态生成表格，表格具体实现方法暂不写
// 请注意：一定要用position：absolute 目的是将页面元素 脱离文档流,目标是可截取非可视区域的内容
<div class="tableArea">
          <table class="table table-striped Table" id="Table"  style="position: absolute;"></table>
  </div>

二、CSS

/*由于canvas画布必须要有背景色，所以这里给单元格添加背景色，不然导出的表格图片为透明背景字体展示不清晰 */
 <style type="text/css">
        table thead tr th,
        table tbody td {
            background:#ffffff
        }
    </style>

三、JS

	//等表格元素加载完成之后再执行图片下载，故写了0.2s的延迟
	  //图片下载
        setTimeout(function () {               
              html2canvas_2();
          },200);
       
       function html2canvas_2() {
			//获取截取区域的高度和宽度
            var TargetNode = document.querySelector("#Table");           
            var h = $(TargetNode).height();
            var w = $(TargetNode).width();
			//设置 canvas 画布的宽高 是容器搞度 2倍、为了是图片清晰
				/**1.创建画布
				    *