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

本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！