最近因为项目需要,研究了几天用js导出页面上的div为图片。项目需求是这样的,一个页面上有统计图和统计表,另外一部分是地图,当用户点击导出报告时,需要将页面内容导出到Excel,统计表可以从后台查出列表,然后以表格形式导出;统计通采用的echarts,可以转换为base64编码,然后后台处理之后导出。但是地图这块就有点难了,首先地图不是一张图片,其次地图的图片不在本地,所以虽然我自己的功能没实现,但是研究出了div导出为图片,需要的就拿走。
div导出为图片,并不是直接完成的,原理可以认为截取屏幕上div大小,然后转换为图片格式。现在有两种方式,首先是将div转换为HTML5的画布,然后画布转换成base64编码,传回后台进行处理;第二种是先把div内容转成svg,然后再转换成base64。
第一种
$(".button").on("click", function(event) {
event.preventDefault();
html2canvas(document.getElementById("textArea"), {
allowTaint:true,
taintTest:false,
onrendered:function(canvas) {
canvas.id= "mycanvas";//生成base64图片数据
var dataUrl =canvas.toDataURL();var newImg = document.createElement("img");
newImg.src=dataUrl;
document.body.appendChild(newImg);
}
});
});
});
测试
这个方式有要注意的问题,是在canvas.toDataUrl()这个方法,这个方法是把canvas转换成base64码,如果你的div中是图片的话,那么这个方法是执行不成功的。另外,上面提到的导出地图的功能,因为地图是多张图片,同时图片在服务器上,所以涉及到跨域和多张图片信息的问题,这时候也是执行不成功的。
第二种
Output Image:
function cutDiv(){
var divContent = document.getElementById("div").innerHTML;
var data = "data:image/svg+xml," +
"" +
"" +
"
divContent +
"
"" +
"";
var img = new Image();
img.src = data;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
img.crossOrigin="anonymous";
img.src = "data:image/svg+xml,";
ctx.drawImage(img, 0, 0);
var canvasbase = canvas.toDataURL();
alert(canvasbase);
}
这种是先把html拼接为svg,然后将组成的svg串赋给一个img的src,然后在画布上画出这个img,最后执行canvas的toDataUrl方法来获得base64码。
这种方式也没能成功导出地图,地图是openlayers做的,本身就是svg,在ctx.drawImage()方法执行时,出现错误,所以没成功。
对于其他比较常用的情况,上面两种转换效果还是蛮好的,如果有用得到的只管拿走;如果上面写的有什么不合适的,请批评指正;另外如果有做过导出地图为图片到word文档的,希望您能不吝赐教,谢谢。
转自:http://blog.csdn.NET/fengyao1995/article/details/51842486