Angularjs - pdfmake.jsを使用したhtmlからpdfへ

Question

pdfmake.jsを使用してpdfをjavascriptで生成する。しかし、コンテンツが大きすぎると、空のドキュメントが生成されます。 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] 
       } 
      } 
     };