首页 > 编程 > JSP > 正文

用jspdf实现页面下载生成pdf文件

2019-11-08 18:50:29
字体:
来源:转载
供稿:网友
 

jspdf实现页面下载生成pdf文件

一路辛酸就不多说了,经历了各种尝试,最后终于搞定,直接贴代码:

function pdfCreater(){   html2canvas(document.body, {    onrendered: function(canvas) {var imgData = canvas.toDataURL();/* var doc = new jsPDF('p', 'pt', 'a4', false); */var doc = new jsPDF();// 第一列 左右边距  第二列上下边距  第三列是图片左右拉伸  第四列 图片上下拉伸 doc.addImage(imgData, 'png', 0,0,260,0);doc.save('合同.pdf');}}); }

[javascript] view plain copy 在CODE上查看代码片function downloadSG(){          html2canvas($('#appmsg'), {          height:5000,          onrendered: function(canvas) {                       var imgData = canvas.toDataURL('img/notice/png');              var doc = new jsPDF('p', 'px','a3');              //第一列 左右边距  第二列上下边距  第三列是图片左右拉伸  第四列 图片上下拉伸              doc.addImage(imgData, 'PNG', -9, 0,650,1500);              doc.addPage();              doc.addImage(imgData, 'PNG', -9, -900,650,1500);              doc.save('test.pdf');          }      });  }  

需要引入三个js文件:

[html] view%20plain copy 派生到我的代码片<script src="./js/libs/jquery-2.0.2.js"></script>  <script src="./js/exportpdf/jspdf.debug.js"></script>  <script src="./js/exportpdf/html2canvas.js"></script>  

关键代码解析:

html2canvas 是将当前页面转换成图片;

$('#appmsg') 是要转换为图片的页面范围;

height:5000,这个高度要根据页面的大小灵活调整;

var doc = new jsPDF('p', 'px','a3'); p:横向,a3:纸张大小,默认是a4;

doc.addImage(imgData, 'PNG', -9, 0,650,1500);将转换后的图片放到pdf文档上,后面四个参数可根据实际效果灵活调整;

doc.addPage(); 一页pdf显示不完整的时候,新增一页;


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表