通过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-