实现html页面转pdf
实现方式比较简单,使用js代码实现的。
需要引入的js:
1、jQuery.js;
2、html2canvas.js(实现方式是先将Html页面转换成image图片然后在转换为pdf,所以转换之后会有一点不清晰【个人认为影响不大】);
2、FileSaver.js(下面的jspdf.js中的“savaAS”函数是基于FileSaver.js的);
3、jspdf.js(jspdf.js的支持还是挺多的,因为我写的这个页面没有那些相对复杂的标签【svg…】。所以本次只引入了插件包中的jspdf.js、addimage.js这两个js文件);
5、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