利用canvas處理嵌套svg網頁中的應用(二)----打印網頁，解決A4紙適配

當前瀏覽器可以支持打印機打印A4紙，但是往往打印效果不是很理想，爲了解決這個問題我利用前幾天網頁轉圖片的解決方案，將網頁保存爲canvas然後打印canvas，即可打印出網頁原有佈局的效果，如圖：打印結果網頁佈局

具體實現代碼如下：

/**
 * 打印界面，爲了使用A4紙縱向打印，設置canvas寬度爲210mm
 * @param containerId 需要打印的dom的id
 * @returns
 */
function printReport(containerId)
{
    MyHtml2Canvas(containerId, function(canvas){
        canvas.style.width = '210mm';
        var wind = window.open("",'newwindow', 'height=800, width=1000, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
        wind.document.body.appendChild(canvas);
        wind.print();
        return false; 
    });
    //printpage("content");
}

/**
 * 說明：解決嵌套svg的網頁導出問題，一般網頁可以直接使用html2canvas函數解決。
 * @param containerId 需要截取成圖片的dom的id
 * @param backcall  轉換爲canvas後的回調函數
 * @returns
 */
function MyHtml2Canvas(containerId, backcall)
{
    scrollTo(0, 0);
    var container = "#"+containerId;//content爲需要截取成圖片的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;
            var svg = outerHTML(node).trim();
            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
            });
            parentNode.removeChild(node);

            nodesToRemove.push({
                parent: parentNode,
                child: canvas
            });
            parentNode.appendChild(canvas);
        });
        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。

代碼及模塊資源鏈接：https://download.csdn.net/download/only_1/10974095