利用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 modereturn;}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 canvasvar tmpDiv = "divCanvasTempContainer_";  //临时div$("body").append("");$("#"+tmpDiv).append(canvas);// printwindow.focus(); // #1510window.print();// allow the browser to prepare before revertingsetTimeout(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的idvar tmpDiv = "divCanvasTempContainer_";  //临时div$("body").append("");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('');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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！