Angularjs - html to pdf using pdfmake.js

• Z时代
• 2024-01-10
• 分类：问答

使用pdfmake.js在javascript中生成pdf。但是如果内容太大，它会生成一个空白文档。使用html2canvas创建画布并使用此创建PDF。如何解决这个问题？Angularjs - html to pdf using pdfmake.js

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 
    }); 
}; 

回答：

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] 
       } 
      } 
     }; 

以上是 Angularjs - html to pdf using pdfmake.js 的全部内容， 来源链接： utcz.com/qa/258675.html