js通过html2canvas，jspdf，canvg来对网页进行截图生成pdf - Go语言中文社区

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 = "<img src="+image+" />";  
        $('#pic').html(pHtml);  
    }  
});  

}
<body>
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
  <button οnclick="down()">pdf</button>
   <button οnclick="down2()">ok</button>
   <button οnclick="exportPDF()">export</button>
   <button οnclick="showQRCode()">showQRCode</button>
   
	<div id="example-2">

  <div id="chart-container">FusionCharts will render here</div>
   <div id="chart-container2">FusionCharts will render here</div>
   <div id="chart-container3">FusionCharts will render here</div>
   <div id="chart-container4">FusionCharts will render here</div>
   
   
   
</div>

<div id="all">
<canvas id='myCanvas01' /></canvas>
</div>

<div id="pic">
图片
</div>
<img src="" />
</body>

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

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 = "<img src="+imgData+" />";  
				$('#pic').html(pHtml);  
			
		});
<body>
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
  <button οnclick="down()">pdf</button>
   <button οnclick="down2()">ok</button>
   <button οnclick="exportPDF()">export</button>
   <button οnclick="showQRCode()">showQRCode</button>
   
	<div id="example-2">

  <div id="chart-container">FusionCharts will render here</div>
   <div id="chart-container2">FusionCharts will render here</div>
   <div id="chart-container3">FusionCharts will render here</div>
   <div id="chart-container4">FusionCharts will render here</div>
   
   
   
</div>

<div id="all">
<canvas id='myCanvas01' /></canvas>
</div>

<div id="pic">
图片
</div>
<img src="" />
</body>



配合使用：

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

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);
              
        }  
    });
   
   
}

<div class="exportBox" >
	 	<h3>乡村教师基本情况分析-现状</h3>
		<div class="inner" style="padding-bottom: 0px;">

		<div class="curt">
		
		<div class="ex_info" id="exportRePDF">
					<c:if test="${countryToSchool ne 'true'}">
                           <table>
                               <tbody>
                                   <tr><td rowspan="6" width="120"></td>
                                   		<td style="padding-left: 40px;"><b>总体情况</b></td>
                                   </tr>
                                   <tr><td> 本地区共有学校<span class="blue">${mapGet['content']['Cschool']+mapGet['content']['Tschool']+0}</span>所，</td></tr>
                                   <tr><td>班级<span class="blue">${mapGet['content']['Cclass']+mapGet['content']['Tclass']+0}</span>个，学生<span class="blue">${mapGet['content']['Cstudent']+mapGet['content']['Tstudent']+0}</span>人，</td></tr>
                                   <tr><td>教职工<span class="blue">${mapGet['CCount'] + mapGet['TCount'] +0}</span>人，</td></tr>
                                   <tr><td>其中乡村学校<span class="blue">${mapGet['content']['Cschool']+0}</span>所(<span class="red">${my431fn:getPercentFloorV2(mapGet['content']['Cschool'],mapGet['content']['Cschool']+mapGet['content']['Tschool'],"%.2f")}</span>)，班级<span class="blue">${mapGet['content']['Cclass']+0}</span>个(<span class="red">${my431fn:getPercentFloorV2(mapGet['content']['Cclass'],mapGet['content']['Cclass']+mapGet['content']['Tclass'],"%.2f")}</span>)，</td></tr>
                                   <tr><td>学生<span class="blue">${mapGet['content']['Cstudent']+0}</span>人，教职工<span class="blue">${mapGet['CCount'] +0}</span>人(<span class="red">${my431fn:getPercentFloorV2(mapGet['CCount'],mapGet['CCount'] + mapGet['TCount'],"%.2f")}</span>)。</td></tr>
                               </tbody>
                           </table>
					</c:if>
					<c:if test="${countryToSchool eq 'true'}">
						 <table>
                               <tbody>
                                   <tr><td rowspan="5" width="120"></td>
                                       <td style="padding-left: 40px;"><b>总体情况</b></td>
                                   </tr>
                                   <tr><td>本学校有班级<span class="blue">${mapGet['content']['classCount']+0}</span>个，</td></tr>
                                   <tr><td>学生<span class="blue">${mapGet['content']['studentCount']+0}</span>人，</td></tr>
                                   <tr><td>教职工<span class="blue">${mapGet['content']['teacherCount'] +0}</span>人，</td></tr>
                               </tbody>
                           </table>
					</c:if>
          </div>
                       
	
   		
  	<h4>详细情况</h4>
  	<div class="chatinner">
	 <div id="chart-container1" style="text-align:center"></div>
	 <br/>
	 <div id="chart-container2" style="text-align:center"></div>
	 <br/>
	 <div id="chart-container3" style="text-align:center"></div>
	 <div id="all">
	 <canvas id='myCanvas01' ></canvas>
	 <canvas id='myCanvas02' ></canvas>
	 <canvas id='myCanvas03' ></canvas>
	 </div>
	</div>
	</div>
	</div>
	</div>


其他参考资料：

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

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/pengbin790000/article/details/79581208
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
  • 发表于 2020-03-01 20:42:08
  • 阅读 ( 875 )
  • 分类：前端

你可能感兴趣的文章

精选的优质文章

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

来源51CTO

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！