js通过html2canvas，jspdf，canvg来对网页进行截图生成pdf

通过html2canvas，jspdf就能够生成截图以及pdf，但是如果对图表（svg）就需要canvg来转换svg生成为图片，再插入到pdf里。

1.html2canvas用法：

首先需要引入这两个文件，最新的可以去git下载

示列：
function down2(){
   var str = $('#example-2');  
//console.log(str);  
html2canvas([str.get(0)], {
	scale: 1,
    onrendered: function (canvas) {  
        var image = canvas.toDataURL("image/png");  
		console.log(image);
        var pHtml = "";  
        $('#pic').html(pHtml);  
    }  
});  

}

  
  Greet
  pdf
   ok
   export
   showQRCode
   
	


  
FusionCharts will render here
   
FusionCharts will render here
   
FusionCharts will render here
   
FusionCharts will render here
   
   
   







图片

这就是一个最简单的截图示列。

2.jspdf生成pdf

需要引入jspdf.js

//l:横向， p：纵向； 单位： in:英寸，mm毫米；px：像素；  画布大小：默认是A4纸大小  
   var pdf = new jsPDF('p', 'mm', [230, 250]); //230 x 250  
   	   
   //添加字，以及字体大小设置
   pdf.setFontSize(40);
   pdf.text(35, 25, "乡村教师基本情况分析-现状");
   //添加图片
   pdf.addImage(img, 'JPEG', 20, 50, 200 , 200); //第3、4个参数是位置（x,y），距离左边20mm，上面50mm第5、6个参数是宽，高，宽200mm，高200mm    
   //保存pdf，名字是：分析报告.pdf
   pdf.save('分析报告.pdf');

其他参考资料：https://www.cnblogs.com/new_2050/p/8097867.html

3.通过canvg转换svg生成图片

需要引入以下文件：

$('#myCanvas01').show();
		
		//获取svg
		var svgHtml = document.getElementById('chartobject-1').innerHTML;
		console.log(svgHtml)
		//转换
		canvg('myCanvas01',svgHtml);
		
			//生成图片
		$('#all').html2canvas({},function(imgData,w,h){
			
				$('#myCanvas01').hide();
				
				var pHtml = "";  
				$('#pic').html(pHtml);  
			
		});

  
  Greet
  pdf
   ok
   export
   showQRCode
   
	


  
FusionCharts will render here
   
FusionCharts will render here
   
FusionCharts will render here
   
FusionCharts will render here
   
   
   







图片

配合使用：

在配合使用时，发现几个个问题

1.这里的chart是fusioncharts，canvg对他有不兼容，所以需要修改源码，在报错的地方：

this.unapply = function(ctx) {
				for (var i=this.transforms.length-1; i>=0; i--) {
					this.transforms[i].apply(ctx);
				}
			}

原先为this.transforms[i].unapply(ctx);修改如图

2.在执行截图，转换svg以及保存pdf时，不是顺序执行的，需要通过计时器顺序执行：

他人资料：

var elementLength = $(".lableClass").length;
    lableDivLength = 0;
     
    //m在你的 onrendered 方法中，每次lableDivLength+1
    onrendered:function(canvas){
        // 你的代码 ...
        pdf.addImage(xxx );
        lableDivLength ++;
    }
     
     
    //最后save 
    var myInterval =setInterval(function(){
        if(lableDivLength == elementLength){
            clearInterval(myInterval);
            pdf.save(xxx);
        }
         
    },1000);

最后贴上我的代码：

//分析报告导出pdf
function exportRePDF(){
	//l:横向， p：纵向； 单位： in:英寸，mm毫米；px：像素；  画布大小：默认是A4纸大小  
   var pdf = new jsPDF('p', 'mm', [230, 250]); //230 x 250  
   var str = $('#exportRePDF');
	   
   //添加字，以及字体大小设置
   //pdf.setFontSize(40);
   //pdf.text(35, 25, "乡村教师基本情况分析-现状");
   
   html2canvas([str.get(0)], { 
        scale: 2,
        onrendered:function(canvas){  
        	var imgData=canvas.toDataURL();  
            pdf.addImage(imgData, 'JPEG', 20, 10, 200 , 35); //第3、4个参数是位置（x,y），第5、6个参数是宽，高    
            
            //获取图表数据截图
            $('#myCanvas01').show();
    		var svgHtml = document.getElementById($("#chart-container1 > span")[0].id).innerHTML;
    		canvg('myCanvas01',svgHtml);
    		$('#myCanvas02').show();
    		var svgHtml = document.getElementById($("#chart-container2 > span")[0].id).innerHTML;
    		canvg('myCanvas02',svgHtml);
    		$('#myCanvas03').show();
    		var svgHtml = document.getElementById($("#chart-container3 > span")[0].id).innerHTML;
    		canvg('myCanvas03',svgHtml);
    		
    		var elementLength = 1;
    	    lableDivLength = 0;
    		$('#all').html2canvas({},function(imgData,w,h){
    				$('#myCanvas01').hide();
    				var img = imgData;
		    		pdf.addImage(img, 'JPEG', 20, 50, 200 , 200); //第3、4个参数是位置（x,y），第5、6个参数是宽，高    
		    		
		    		lableDivLength ++;
    			
    		});
    		
            //这里是异步的，如果保存在外面则保存空图，因为数据还没截图下来
            //最后save 
    		var myInterval =setInterval(function(){
        		if(lableDivLength == elementLength){
            		clearInterval(myInterval);
	           		pdf.save('分析报告.pdf');
        		}
  			},1000);
              
        }  
    });
   
   
}

	 	
乡村教师基本情况分析-现状
		


		

		
		

					
                           

                               

                                   

                                   		
总体情况
                                   
                                   
 本地区共有学校${mapGet['content']['Cschool']+mapGet['content']['Tschool']+0}所，
                                   
班级${mapGet['content']['Cclass']+mapGet['content']['Tclass']+0}个，学生${mapGet['content']['Cstudent']+mapGet['content']['Tstudent']+0}人，
                                   
教职工${mapGet['CCount'] + mapGet['TCount'] +0}人，
                                   
其中乡村学校${mapGet['content']['Cschool']+0}所(${my431fn:getPercentFloorV2(mapGet['content']['Cschool'],mapGet['content']['Cschool']+mapGet['content']['Tschool'],"%.2f")})，班级${mapGet['content']['Cclass']+0}个(${my431fn:getPercentFloorV2(mapGet['content']['Cclass'],mapGet['content']['Cclass']+mapGet['content']['Tclass'],"%.2f")})，
                                   
学生${mapGet['content']['Cstudent']+0}人，教职工${mapGet['CCount'] +0}人(${my431fn:getPercentFloorV2(mapGet['CCount'],mapGet['CCount'] + mapGet['TCount'],"%.2f")})。
                               
                           
					
					
						 

                               

                                   

                                       
总体情况
                                   
                                   
本学校有班级${mapGet['content']['classCount']+0}个，
                                   
学生${mapGet['content']['studentCount']+0}人，
                                   
教职工${mapGet['content']['teacherCount'] +0}人，
                               
                           
					
          
                       
	
   		
  	
详细情况
  	

	 

	 

	 

	 

	 

	 

	 
	 
	 
	 
	
	
	
	

其他参考资料：

他人highcharts的截图导出git：https://github.com/HeatseekingMissile/svgIntercept-for-canvas-