issue exists when data to show is more

I want to export the data to pdf document using angularjs html2canvas,pdfMake.
Issue is when the data is more(more than one page data), the PDF document is blank and the content is not written. How to resolve this?

Demo plunker: https://plnkr.co/edit/2EmYw92Sz5LBGzu2fg4p?p=preview

The above demo works and generate the PDF when user click on export button but if $scope.employees has lot of data as shown in the commented code below in the plnkr script.js, the generated PDF is blank.

Other issue is how to divide into multiple pages , like in the demo example if i want to show each name in individual page how to iterate and show the result in individual pages. Any suggestions?

js code:

app.controller("listController", ["$scope",
   function($scope) {
      $scope.employees = [{firstName: "Joe"}, {firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},
     {firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"}];


    /* $scope.employees = [{firstName: "Joe"}, {firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},
     {firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},
     {firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},
     {firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},
     {firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},
     {firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},
     {firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},
     {firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},
     {firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},
     {firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},{firstName: "Joe"},];
*/
     $scope.export = function() {
       html2canvas(document.getElementById('exportthis'), {
         onrendered: function(canvas) {
           var data = canvas.toDataURL();
           var docDefinition = {
             content: [{
               image: data,
               width: 500,
             }]
           };
           pdfMake.createPdf(docDefinition).download("test.pdf");
         }
       });
     }
   }
 ]);

Source: AngularJS