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

 

用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

 

1. function downloadSG(){  
2.         html2canvas($('#appmsg'), {  
3.         height:5000,  
4.         onrendered: function(canvas) {           
5.             var imgData = canvas.toDataURL('img/notice/png');  
6.             var doc = new jsPDF('p', 'px','a3');  
7.             //第一列 左右边距  第二列上下边距  第三列是图片左右拉伸  第四列 图片上下拉伸  
8.             doc.addImage(imgData, 'PNG', -9, 0,650,1500);  
9.             doc.addPage();  
10.             doc.addImage(imgData, 'PNG', -9, -900,650,1500);  
11.             doc.save('test.pdf');  
12.         }  
13.     });  
14. }  

需要引入三个js文件：

[html]  view plain  copy

 

1. <script src="./js/libs/jquery-2.0.2.js"></script>  
2. <script src="./js/exportpdf/jspdf.debug.js"></script>  
3. <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显示不完整的时候，新增一页；

如果本博客无法帮助你，请看这里，本人使用过，效果很好：http://blog.csdn.net/w20228396/article/details/68065552