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.创建画布
				    * 2.设置canvas 大小
				    * */
				var canvas = document.createElement("canvas");
				//这是画布整体的大小
				canvas.width = w * 2;
				canvas.height = h * 2;
				//这是绘画范围的大小
				canvas.style.width = w + "px";
				canvas.style.height = h + "px";
				canvas.style.color = "chartreuse"
				//画布缩小，将图片发大两倍 
				var context = canvas.getContext("2d")
				context.scale(2,2)
				// 再说一次 要截取全部，必须要脱离文档流 position: absolute; 否则只能截取到看到的部分。
				
				html2canvas($("#Table"), { 
					allowTaint: true,
				    taintTest: false,
//					canvas: canvas,
					onrendered: function(canvas) {
						// 图片导出为 png 格式
						var type = 'png';
						var imgData = canvas.toDataURL(type);
						var _fixType = function(type) {
							type = type.toLowerCase().replace(/jpg/i, 'jpeg');
							var r = type.match(/png|jpeg|bmp|gif/)[0];
							return 'image/' + r;
						};

						// png 替换 mime type 为了下载
						imgData = imgData.replace(_fixType(type), 'image/octet-stream');
						/**
						    * 在本地进行文件保存
						    * {String} data     要保存到本地的图片数据
						    * {String} filename 文件名
						    */
						var saveFile = function(data, filename) {
						//创建一个命名空间。是 a 标签
						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);
						};
						// 下载后的问题名
						var filename = '推送数据' + (new Date()).getTime() + '.' + type;
						// download
						saveFile(imgData, filename);
					}
				})
    } 
           

四、页面效果
（1）给单元格添加背景颜色

（2）只给tbody单元格添加背景颜色

五、补充
现将ExportPrint.js的使用方法也补充如下：

	//导出图片
	ExportPrint("导出按钮id", "print", "导出元素id选择器", "导出图片名称");

ExportPrint.js

//文件下载
function downloadFile(fileName, content) {
    var aLink = document.createElement('a');
    var blob = new Blob([content]);
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.dispatchEvent(evt);
}
//根据不同的浏览器使用相应的方式来创建异步对象aaaaaaaa
function createXmlHttp() {
    xhobj = false;
    try {
        xhobj = new ActiveXObject("Msxml2.XMLHTTP");  //iemsxml3.0+
    } catch (e) {
        try {
            xhobj = new ActiveXObject("Microsoft.XMLHTTP");  //iemsxml2.6
        } catch (e2) {
            xhobj = false;
        }
    }
    if (!xhobj && typeof XMLHttpRequest != "undefined")  //Firefox、Opera 8.0+,Safari,谷歌浏览器
    {
        xhobj = new XMLHttpRequest();
    }
    return xhobj;
}

function ExportPrint(ExportBtn,PirntBtn,DataAreaName,EnportPngName) {


    //图标打印
    $("#" + PirntBtn).on("click", function (event) {
        event.preventDefault();

        html2canvas(document.getElementById(DataAreaName), {
            allowTaint: true,
            taintTest: false,
            onrendered: function (canvas) {
                canvas.id = "printcanvas";
                //document.body.appendChild(canvas);
                //生成base64图片数据
                var dataUrl = canvas.toDataURL();
                var newImg = document.createElement("img");
                newImg.src = dataUrl;
                /* document.body.appendChild(newImg);  */
                /* window.open(newImg.src); */
                var printWindow = window.open(newImg.src);
                // printWindow.document.write();
                printWindow.document.write('<img src="' + newImg.src + '" />')
                printWindow.print();
            }
        });

    });

    // 加工image data，替换mime type 图标下砸
    $("#" + ExportBtn).on("click", function (event) {

        event.preventDefault();

        html2canvas(document.getElementById(DataAreaName), {
            allowTaint: true,
            taintTest: false,
            onrendered: function (canvas) {
                canvas.id = "mycanvas";
                //document.body.appendChild(canvas);
                //生成base64图片数据
                var type = 'png';
                var dataUrl = canvas.toDataURL(type);
                var imgData = dataUrl.replace(_fixType(type), 'image/octet-stream');
                saveFile(imgData, EnportPngName+'.png');
            }
        });

    });

    var _fixType = function (type) {
        type = type.toLowerCase().replace(/jpg/i, 'jpeg');
        var r = type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/' + r;
    };
    var saveFile = function (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);
    };

}