利用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

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

相关推荐