实现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

实现html页面转pdf

相关推荐