<!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 */