实现html页面转pdf

实现方式比较简单，使用js代码实现的。

须要引入的js：

一、jQuery.js；

二、html2canvas.js（实现方式是先将Html页面转换成image图片而后在转换为pdf，因此转换以后会有一点不清晰【我的认为影响不大】）；

二、FileSaver.js（下面的jspdf.js中的“savaAS”函数是基于FileSaver.js的）；

三、jspdf.js（jspdf.js的支持仍是挺多的，由于我写的这个页面没有那些相对复杂的标签【svg…】。因此本次只引入了插件包中的jspdf.js、addimage.js这两个js文件）；

五、addimage.js；

 

上代码：

$("#turnToPdfButton").click(function(){
　　　html2canvas($("#mainPdfHtml"), { //选择你要导出的html区域
　　　　　onrendered: function(canvas) {
　　　　　var imgData = canvas.toDataURL('image/jpeg');
　　　　　var img = new Image();
　　　　　img.src = imgData;
　　　　　//根据图片的尺寸设置pdf的规格，要在图片加载成功时执行，之因此要*0.225是由于比例问题
　　　　　img.onload = function() {
　　　　　//此处须要注意，pdf横置和竖置两个属性，须要根据宽高的比例来调整，否则会出现显示不彻底的问题
　　　　　if (this.width > this.height) {
　　　　　　　var doc = new jsPDF('l', 'mm', [this.width * 0.225, this.height * 0.225]);
　　　　　} else {
　　　　　　　var doc = new jsPDF('p', 'mm', [this.width * 0.225, this.height * 0.225]);
　　　　　}
　　　　　doc.addImage(imgData, 'jpeg', 0, 0, this.width * 0.225, this.height * 0.225);
　　　　　//根据下载保存成不一样的文件名
　　　　　doc.save('下载名称.pdf');
　　　}
　　},
　　background: "#fff",
　　//这里给生成的图片默认背景，否则的话，若是你的html根节点没设置背景的话，会用黑色填充。
　　allowTaint: true //避免一些不识别的图片干扰，默认为false，遇到不识别的图片干扰则会中止处理html2canvas
　　});
});

 

 

资源下载地址：

html2canvas.js  >>>   https://github.com/niklasvh/html2canvas/releases

FileSaver.js  >>>   https://github.com/eligrey/FileSaver.js/

jspdf.js  >>>   https://github.com/MrRio/jsPDF