<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.20/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.20/vfs_fonts.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="pdfDemo">
  <div ng-controller="pdfCtrl">
    <button ng-click="openPdf()">Open Pdf</button>
    <button ng-click="downloadPdf()">Download Pdf</button>
  </div>
</body>

</html>
var app = angular.module('pdfDemo', []);
var controller = app.controller('pdfCtrl', pdfController);

function pdfController($scope) {
  // prepare the document definition using declarative approach
  var docDefinition = {
    content: [
      {
        text: 'Fruits and Calories'
      },
      {
        style: 'demoTable',
        table: {
          widths: ['*', '*', '*'],
          body: [
            [{text: 'Fruit', style: 'header'}, {text: 'Quantity', style: 'header'},
              {text: 'Calories', style: 'header'}
            ],
            ['Apple', '100 grams', '52'],
            ['Bananas', '100 grams', '89'],
            ['Guava', '100 grams', '68'],
            ['Lemon', '100 grams', '29'],
            ['Mangos', '100 grams', '60'],
            ['Orange', '100 grams', '47'],
            ['Strawberries', '100 grams', '33']
          ]
        }
      }
    ],
    styles: {
      header: {
        bold: true,
        color: '#000',
        fontSize: 11
      },
      demoTable: {
        color: '#666',
        fontSize: 10
      }
    }
  };

  $scope.openPdf = function() {
    pdfMake.createPdf(docDefinition).open();
  };

  $scope.downloadPdf = function() {
    pdfMake.createPdf(docDefinition).download();
  };
}
/* Styles go here */