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页中，直到切完所有。这种方式肯定不是很好的，只是适用了业务的需要，就没有进行深入研究学习。如果大家有更好的方法，请一定要记得告诉我！
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery