若前者小於後者說明不用分頁，直接新增圖片資料匯出，原始碼如下：

    if(contentHeight < pageHeight){

        pdf.addImage(imgData, 'JPEG', 0, 0,pdfFormat[format][0],pdfFormat[format][1]/pageHeight*contentHeight);

        pdf.save(pdfName);

    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7

若前者大於後者，則需要分頁：

1. 先求出頁數 count ，迴圈次數為 count-1
2. 設定 page 的 background 偏移
3. 接著渲染page為canvas獲取圖片url資料 pageData
   插入 pdf 物件中，pdf 物件執行 addPage() 函式
4. 新增最後一頁，因為最後一頁高度可能和pageHeight大小不一致，因此設定 page 的高度為計算的得出的 lastPageHeight ，渲染成canvas獲取圖片資料插入 `pdf 中

5. 匯出儲存，原始碼如下：

       var index = 0;
       var count = parseInt(contentHeight / pageHeight);
   
       var page = document.createElement("div");
   
       page.style.position = "absolute";
       page.style.width = contentWidth + "px"
    
   ;
       page.style.height = pageHeight + "px";
       page.style.backgroundImage = "url(" + imgData + ")";
       page.style.backgroundRepeat = "norepeat";
   
       document.body.appendChild(page);
   
       function addPage(i, onFinished){
   
           page.style.backgroundPositionY = -pageHeight * i + "px";
   
           html2canvas(page, {
    
   
   
               onrendered: function(canvas) {
   
                   var pageData = canvas.toDataURL('image/jpeg');
   
                   pdf.addImage(pageData, 'JPEG', 0, 0,pdfFormat[format][0],pdfFormat[format][1]);
   
                   if(i + 1 < count){
                       pdf = pdf.addPage();
                       addPage(i + 1, onFinished);
                   }
                   else{
                       onFinished()
                   }
   
               }
           });
   
       }
   
       addPage(index, function(){
   
           page.style.backgroundPositionY = -pageHeight * count + "px";
   
           var lastPageHeight = contentHeight % pageHeight;
           page.style.height = lastPageHeight + "px";
   
           html2canvas(page, {
   
               onrendered: function(canvas) {
   
                   var pageData = canvas.toDataURL('image/jpeg');
   
                   pdf = pdf.addPage();
                   pdf.addImage(pageData, 'JPEG', 0, 0,pdfFormat[format][0], pdfFormat[format][1]/pageHeight*lastPageHeight);
   
                   document.body.removeChild(page);
   
                   onSuccess && onSuccess();
   
                   pdf.save(pdfName);
   
               }
           });
   
   
       });

   • 1
   • 2
   • 3
   • 4
   • 5
   • 6
   • 7
   • 8
   • 9
   • 10
   • 11
   • 12
   • 13
   • 14
   • 15
   • 16
   • 17
   • 18
   • 19
   • 20
   • 21
   • 22
   • 23
   • 24
   • 25
   • 26
   • 27
   • 28
   • 29
   • 30
   • 31
   • 32
   • 33
   • 34
   • 35
   • 36
   • 37
   • 38
   • 39
   • 40
   • 41
   • 42
   • 43
   • 44
   • 45
   • 46
   • 47
   • 48
   • 49
   • 50
   • 51
   • 52
   • 53
   • 54
   • 55
   • 56
   • 57
   • 58
   • 59
   • 60
   • 61
   • 62
   • 63
   • 64
   • 65