<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/urish/angular-load/master/angular-load.min.js"></script>
<!-- <script src="https://cdn.rawgit.com/bpampuch/pdfmake/master/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/master/build/vfs_fonts.js"></script> -->
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl as vm" class="container" style="padding-top: 10px">
<h1>{{vm.title}}</h1>
<div>{{vm.status}}</div>
<button class="btn btn btn-primary" ng-click="vm.changeTitle('Changed title')">Change the title</button>
<div demo-content="" name="SuperDuper"></div>
<p>
<button class="btn btn btn-primary" ng-click="vm.createXlsx()">Create & download XLSX</button>
</p>
<p>
<button class="btn btn btn-primary" ng-click="vm.createPdf()">Create & download PDF</button>
</p>
</body>
</html>
// Code goes here
angular.module('app', ['angularLoad']);
angular.module('app')
.controller('mainCtrl', MainController);
MainController.$inject = ['$q', 'angularLoad'];
function MainController($q, angularLoad) {
var vm = this;
vm.title = "AngularJS/Bootstrap Starter Template";
vm.status = '';
vm.changeTitle = changeTitle;
vm.createXlsx = createXlsx;
vm.createPdf = createPdf;
function changeTitle(name) {
vm.title = name;
}
function createPdf() {
var promises = [
angularLoad.loadScript('https://cdn.rawgit.com/bpampuch/pdfmake/master/build/pdfmake.min.js'),
angularLoad.loadScript('https://cdn.rawgit.com/bpampuch/pdfmake/master/build/vfs_fonts.js'),
angularLoad.loadScript('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js'),
];
$q.all(promises)
.then(function() {
// all scripts loaded succesfully.
createPdf_whenScriptsLoaded();
}).catch(function() {
// There was some error loading the script. Meh
});
}
function createPdf_whenScriptsLoaded() {
var docDefinition = {
pageMargins: [72, 80, 40, 60],
layout: 'headerLineOnly',
pageSize: 'A4',
header: function() {
return {
columns: [{
text: 'Csharp',
width: 200,
margin: [50, 20, 5, 5]
}, {
stack: [{
text: 'Project Details',
alignment: 'right',
fontSize: 12,
margin: [0, 30, 50, 0]
}]
}]
}
},
footer: function(currentPage, pageCount) {
return {
stack: [{
canvas: [{
type: 'line',
x1: 0,
y1: 5,
x2: 595,
y2: 5,
lineWidth: 1,
lineColor: '#ffff00',
style: ['lineSpacing']
}]
}, {
text: '',
margin: [0, 0, 0, 5]
}, {
columns: [{}, {
text: currentPage.toString(),
alignment: 'center'
}, {
text: moment(new Date()).format("DD-MMM-YYYY"),
alignment: 'right',
margin: [0, 0, 20, 0]
}]
}]
};
},
content: [{
stack: getTable()
}],
styles: {
'lineSpacing': {
margin: [0, 0, 0, 6]
},
'doublelineSpacing': {
margin: [0, 0, 0, 12]
},
'headingColor': {
color: '#999966'
},
tableHeader: {
bold: true,
fontSize: 13,
color: '#669999'
}
}
}
// pdfMake.createPdf(docDefinition).open();
var date = new Date();
date = moment(date).format('DD_MMM_YYYY_HH_mm_ss');
pdfMake.createPdf(docDefinition).download('PDF_' + date + '.pdf');
}
var getLayout = function() {
return {
hLineWidth: function() {
return 0.1;
},
vLineWidth: function() {
return 0.1;
},
hLineColor: function() {
return 'gray';
},
vLineColor: function() {
return 'gray';
}
};
};
var getTable = function() {
return [{
text: 'PDF Print Test',
fontSize: 20,
bold: false,
alignment: 'center',
style: ['lineSpacing', 'headingColor']
}, {
canvas: [{
type: 'line',
x1: 0,
y1: 5,
x2: 595 - 2 * 40,
y2: 5,
lineWidth: 1,
lineColor: '#990033',
style: ['lineSpacing']
}]
}, {
text: '',
style: ['doublelineSpacing']
}, {
table: {
widths: ['auto', 'auto', 'auto', 'auto'],
headerRows: 1,
// keepWithHeaderRows: 1,
body: [
['Project', {
text: 'Technology',
style: 'tableHeader'
}, 'Language', 'Database'],
['Intranet', 'Microsoft', {
text: 'Sharepoint',
colSpan: 2
}, {}],
['Online Jobs', 'Microsoft', 'Asp.Net', 'SQL Server']
]
},
layout: getLayout()
}
];
};
function createXlsx() {
vm.status = 'loading...';
var promises = [
angularLoad.loadScript('https://cdn.rawgit.com/SheetJS/js-xlsx/master/dist/xlsx.core.min.js'),
angularLoad.loadScript('https://cdn.rawgit.com/eligrey/Blob.js/master/Blob.js'),
angularLoad.loadScript('https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.js'),
];
$q.all(promises)
.then(function() {
// Script loaded succesfully.
// We can now start using the functions from someplugin.js
vm.status = 'success';
createXlsx_whenScriptsLoaded();
}).catch(function() {
// There was some error loading the script. Meh
vm.status = 'fail!';
});
}
function createXlsx_whenScriptsLoaded() {
vm.status = 'create xlsx';
// original data
var data = [
[1, 2, 3],
[true, false, null, "sheetjs"],
["foo", "bar", new Date("2014-02-19T14:30Z"), "0.3"],
["baz", null, "qux"],
["Daily Calories", 2600],
["Protein", 155 + " g", "35%"],
["Fats", 40 + " g", "30%"],
["Carbs", 160 + " g", "35%"]
];
var ws_name = "Kinobody Calories, Macros";
var wb = new Workbook();
var ws = sheet_from_array_of_arrays(data);
// add worksheet to workbook
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;
// create excel in memory
var wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'binary'
});
// send to browser
saveAs(new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}), "test.xlsx");
vm.status = 'done';
}
function datenum(v, date1904) {
if (date1904) v += 1462;
var epoch = Date.parse(v);
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}
function sheet_from_array_of_arrays(data, opts) {
var ws = {};
var range = {
s: {
c: 10000000,
r: 10000000
},
e: {
c: 0,
r: 0
}
};
for (var R = 0; R != data.length; ++R) {
for (var C = 0; C != data[R].length; ++C) {
if (range.s.r > R) range.s.r = R;
if (range.s.c > C) range.s.c = C;
if (range.e.r < R) range.e.r = R;
if (range.e.c < C) range.e.c = C;
var cell = {
v: data[R][C]
};
if (cell.v === null) continue;
var cell_ref = XLSX.utils.encode_cell({
c: C,
r: R
});
if (typeof cell.v === 'number') cell.t = 'n';
else if (typeof cell.v === 'boolean') cell.t = 'b';
else if (cell.v instanceof Date) {
cell.t = 'n';
cell.z = XLSX.SSF._table[14];
cell.v = datenum(cell.v);
} else cell.t = 's';
ws[cell_ref] = cell;
}
}
if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
return ws;
}
function Workbook() {
if (!(this instanceof Workbook)) return new Workbook();
this.SheetNames = [];
this.Sheets = {};
}
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
}
angular.module('app').directive('demoContent', function() {
return {
scope: {
name: '@'
},
template: '<div class="well">The name is: {{name}}</div>',
};
});
/* Styles go here */
Testing XLSX export:
https://github.com/SheetJS/js-xlsx
http://sheetjs.com/demos/table.html
https://rawgit.com/eligrey/Blob.js/master/Blob.js
https://github.com/urish/angular-load
http://www.ryansouthgate.com/2016/04/19/q-all-combining-promises-in-angularjs-2/
// sheetJS extension with styling:
https://github.com/protobi/js-xlsx
http://rawgit.com/
// PDF
http://www.c-sharpcorner.com/blogs/generate-pdf-using-pdf-make-and-angularjs
//
https://github.com/bpampuch/pdfmake
http://pdfmake.org/#/
https://github.com/MrRio/jsPDF
https://parall.ax/products/jspdf
http://chancejs.com/
// Ionic
http://ionicframework.com/
https://github.com/ashteya/ionic-tutorial-pdf
http://gonehybrid.com/how-to-create-and-display-a-pdf-file-in-your-ionic-app/