canvans的原理是将dom节点在Canvas里画出来，虽然特殊方便，但是仍有一些限制。如：

 

　　不支持iframe

 

　　不支持跨域图片

 

　　部分浏览器上不支持SVG图片

 

　　不支持Flash

 

　　不支持古代浏览器和IE9以下

 

　　function canvasImg(divName,formName,actionType){

 

　　html2canvas(divName, {

 

　　onrendered : function(canvas) {

 

　　var myImage=canvas.toDataURL(“image/jpeg”);

 

　　//动态生成input框

 

　　var input1=document.createElement(‘input’);

 

　　input1.setAttribute(‘type’, ‘hidden’);

 

　　input1.setAttribute(‘name’, ‘canvasImg’);

 

　　input1.setAttribute(‘value’,myImage);

 

　　formName.appendChild(input1);

 

　　formName.actionType.value=actionType;

 

　　formName.submit();

 

　　}

 

　　});

 

　　}

 

　　在这里我抽取成了公共JS，divName是$(‘#id’)取需要截图的DOM对象，function(canvas)渲染完成后回调的canvas对象formName是form表单的名字，actionType是action方法名。 我这里是将得到的截图，进行Base64编码，再通过post请求，在后台获取。

 

　　data是经过base64编码的图片数据，将图片通过写入文件流中。

 

　　这里的PDF使用是IText生成。

 

　　如果图片过大，则必须进行分页。但是生成的是一张大图，Itext无法进行自动分页。这里分页有两种思想。一是使用虚拟打印机，将图片分页，再进行导出。二就是将大图切成小图，这种方式依赖于图片切分的大小比列。这里我只实现了第二种方式，所以只对第二种做一些讲解。

 

　　这里的思路是：我这里只是将图片适应A4纸，所以只进行横向切片，每次按比例切出一张图片，就放入一张PDF页中，直到切完所有。这种方式肯定不是很好的，只是适用了业务的需要，就没有进行深入研究学习。如果大家有更好的方法，请一定要记得告诉我！