Angularjs - html to pdf using pdfmake.js

Question

使用pdfmake.js在javascript中生成pdf。但是如果內容太大，它會生成一個空白文檔。使用html2canvas創建畫布並使用此創建PDF。如何解決這個問題？

self.exportAsCanvas = function (contentObject, fileName, heading) { 
    var useWidth = $(contentObject)[0].offsetWidth; 
    var useHeight = $(contentObject)[0].offsetHeight; 
    //var graphContent = angular.element(contentObject).find('.graph-content'); 

    html2canvas(contentObject, { 
     onrendered: function (canvas) { 
      document.body.appendChild(canvas); 
      var data = canvas.toDataURL(); 

      var docDefinition = { 
       header: { text: heading, style: 'header' }, 
       footer: { 
        columns: [ 
         { text: 'Copyright © 2015 H&R Block. All Rights Reserved.', alignment: 'center',fontSize: 11 } 
        ] 
       },      
       pageOrientation: self.pageOrientation, 
       content: [{ 
        image: data, 
        fit: [1000, 1100] 
        //width: 500, 
        //height:1100 
       }], 
       styles: { 
        header: { 
         fontSize: 14, 
         bold: true, 
         alignment: 'center', 
         margin: [0, 10, 0, 10] 
        } 
       } 
      }; 

      pdfMake.createPdf(docDefinition).download(fileName + ".pdf"); 
     }, 
     width: useWidth, 
     height: useHeight 
    }); 
}; 

Answer 1

你應該嘗試實現分頁：

var docDefinition = { 
      header: { text: heading, style: 'header' }, 
      footer: { 
       columns: [ 
        { text: 'Copyright © 2015 H&R Block. All Rights Reserved.', alignment: 'center',fontSize: 11 } 
       ] 
      },      
      pageOrientation: self.pageOrientation, 
      content: [{ 
       image: data, 
       fit: [1000, 1100], 
       pageBreak: 'after', //PAGE BREAK 
       //width: 500, 
       //height:1100 
      }], 
      styles: { 
       header: { 
        fontSize: 14, 
        bold: true, 
        alignment: 'center', 
        margin: [0, 10, 0, 10] 
       } 
      } 
     };