1. 程式人生 > >用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 在CODE上檢視程式碼片派生到我的程式碼片
  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檔案:
  1. <scriptsrc="./js/libs/jquery-2.0.2.js"></script>
  2. <scriptsrc="./js/exportpdf/jspdf.debug.js"
    ></script>
  3. <scriptsrc="./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