本文主要是介绍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，名字是：分析报告.pdfpdf.save('分析报告.pdf');其他参考资料：https://www.cnblogs.com/new_2050/p/8097867.html
3.通过canvg转换svg生成图片
需要引入以下文件：
$('#myCanvas01').show();//获取svgvar 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>2019.10.30更新
最近在GitHub上发现一个与html2canvas类似功能的dom转图片工具dom-to-image，鉴于二者比较：
html2canvas截图花费时长较多，且有cancas的dom节点可能出现截图不完整，因此推荐采用dom-to-image，二者用法类似。
这篇关于js通过html2canvas，jspdf，canvg来对网页进行截图生成pdf的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
