利用canvas处理嵌套svg网页中的应用(二)----打印网页，解决A4纸适配

当前浏览器可以支持打印机打印A4纸，但是往往打印效果不是很理想，为了解决这个问题我利用前几天网页转图片的解决方案，将网页保存为canvas然后打印canvas，即可打印出网页原有布局的效果，如图：打印结果网页布局

具体实现代码如下：

/**
 * 打印界面，为了使用A4纸纵向打印，设置canvas宽度为210mm
 * @param containerId 需要打印的dom的id
 * @returns
 */
var gPrinting = false;
function printReport(containerId)
{
	if (gPrinting) { // block the button while in printing mode
		return;
	}
	var origDisplay = [];
	var hpw = $("#"+containerId).height() / $("#"+containerId).width();
	gPrinting = true;
	
	MyHtml2Canvas(containerId, function(canvas){
		canvas.style.width = '210mm';
		canvas.style.height = 210 * hpw + "mm";
		var childNodes = document.body.childNodes;
		// hide all body content
		$.each(childNodes, function (i, node) {
			if (node.nodeType === 1) {
				origDisplay[i] = node.style.display;
				node.style.display = 'none';
			}
		});
		
		// pull out the canvas
		var tmpDiv = "divCanvasTempContainer_";  //临时div
	    $("body").append("<div id='"+tmpDiv+"' ></div>");
	    $("#"+tmpDiv).append(canvas);
		
		// print
		window.focus(); // #1510
		window.print();
		
		// allow the browser to prepare before reverting
		setTimeout(function () {
			// restore all body content
			$.each(childNodes, function (i, node) {
				if (node.nodeType === 1) {
					node.style.display = origDisplay[i];
				}
			});
			$("#"+tmpDiv).remove();
			gPrinting = false;
		}, 1000);
		return false;
	});
}
           

/**
 * 说明：解决嵌套svg的网页导出问题，一般网页可以直接使用html2canvas函数解决。
 * @param containerId 需要截取成图片的dom的id
 * @param backcall  转换为canvas后的回调函数
 * @returns
 */
function MyHtml2Canvas(containerId, backcall)
{
	scrollTo(0, 0);
    var container = "#"+containerId;//为需要截取成图片的dom的id
    var tmpDiv = "divCanvasTempContainer_";  //临时div
    $("body").append("<div id='"+tmpDiv+"' style='display:none;'></div>");
    if (typeof html2canvas !== 'undefined') {
        //以下是对svg的处理
        var nodesToRecover = [];
        var nodesToRemove = [];
        var svgElem = $(container).find('svg');
        var lstSvgHtml = [];
        svgElem.each(function (index, node) {
            var parentNode = node.parentNode;
            //$(node).find(".highcharts-background").attr("fill", "white");
            var svg = outerHTML(node).trim();
            //svg = svg.replace(/fill="transparent"/g, 'fill="white"');
      	
            lstSvgHtml.push(svg);
            //var svg = parentNode.html().trim();
            //创建临时的canvas
            $("#"+tmpDiv).html('<canvas class="tempCanvas"></canvas>');
            var canvas = $("#"+tmpDiv+" canvas")[0];
            canvg(canvas, svg); 
            if (node.style.position) {
                canvas.style.position += node.style.position;
                canvas.style.left += node.style.left;
                canvas.style.top += node.style.top;
            }

            nodesToRecover.push({
                parent: parentNode,
                child: node
            });
           // $("#divCanvas").append(svg);
            parentNode.removeChild(node);

            nodesToRemove.push({
                parent: parentNode,
                child: canvas
            });
            parentNode.appendChild(canvas);
            //$("#divCanvas").append(canvas);
            
        });
        //$("#divCanvas").show();
        html2canvas(document.querySelector(container), {
            onrendered: backcall
        }); 
    }
    
    //把添加的删除掉，再把删除掉的添加回来
    for( var i = 0; i < nodesToRecover.length; ++i)
	{
    	var $parent = $(nodesToRecover[i].parent);
    	$parent.find(".tempCanvas").remove();
    	//console.log(nodesToRecover[i].child);
    	$parent.append(nodesToRecover[i].child);
	}
    //删除临时div
    $("#"+tmpDiv).remove();
}
           

需要的其他模块有：jquery.js,html2canvas.js,canvg.js,rgbcolor.js。

基本兼容了ie11、chrome、firefox。ie edge中包含svg时会有问题。

代码及模块资源链接：https://download.csdn.net/download/only_1/10974095