实现方式比较简单,使用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

最新文章

  1. 创建cocos项目并打包
  2. MariaDB 多主一从 搭建测试
  3. 来吧!带你玩转 Excel VBA
  4. 理解ip和端口
  5. Node.js简介
  6. 动态页面的登陆——装饰器应用<代码>
  7. linux 查看僵尸进程
  8. MongoDB(三)mongoDB下载和安装
  9. php处理金额显示的一些笔记
  10. 使用VS2013编译webkit
  11. ”在活动中穿梭”已经重做为“Intent的使用”
  12. Latex: 插入数学公式
  13. EntityFramework6之原生SQL
  14. CSS3_线性渐变_径向渐变----背景
  15. Hadoop学习笔记(六):hive使用
  16. redis make编译失败的原因
  17. AOJ 0005 GCD and LCM
  18. 【转】Git命令大全(非常齐全)
  19. LA 3135 阿格斯(优先队列)
  20. application/x-www-form-urlencode 和 multiple/form-data

热门文章

  1. NOIP模拟测试24「star way to hevaen·lost my music」
  2. 将Winform和wpf的界面转换为CPF代码用来实现跨平台
  3. jwt-在asp.net core中的使用jwt
  4. kubernetes之副本控制器(RC/RS)
  5. 8.QSharedPointer
  6. Jenkins CI&CD 自动化发布项目实战(上篇)
  7. 9.11、mysql增量备份和增量恢复介绍
  8. 19、oracle的启动和关闭过程
  9. CentOS-搭建MinIO集群
  10. XCTF easyGo