I have problem when make an ionic app for IOS about cannot generate PDF file after get data from $localStorage using ngStorage plugin and PDFmake plugin . Its my controllers.js script below:
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
.controller('PlaylistsCtrl', ['$scope', '$location', '$localStorage', function($scope, $location, $localStorage) {
$scope.model = {
phone: '',
total: '',
type: '',
discount: '',
};
$scope.producttype = [{
product: "A",
value: 7900000,
discount1: 5612,
discount2: 79000
}, {
product: "B",
value: 10200000,
discount1: 5612,
discount2: 79000
}, {
product: "C",
value: 11000000,
discount1: 5612,
discount2: 79000
}, {
product: "D",
value: 7300000,
discount1: 5612,
discount2: 79000
}, {
product: "E",
value: 10000000,
discount1: 5612,
potongan2: 79000
}, {
product: "F",
value: 11200000,
discount1: 5612,
discount2: 79000
}, ];
$scope.create = function(model) {
$scope.model.total = $scope.model.phone + 3;
$localStorage.model = $scope.model;
console.log($localStorage.model);
$location.path('/app/more');
}
}])
.controller('MoreCtrl', ['$scope', '$ionicHistory', '$localStorage', function($scope, $ionicHistory, $localStorage) {
$scope.model = $localStorage.model;
if ($scope.model.type == "Good") {
$scope.model.selection = $scope.model.type.discount1;
console.log($scope.model.discount);
} else {
$scope.model.selection = $scope.model.type.discount2;
console.log($scope.model.discount);
}
var binaryArray = null;
var currentfileEntry = null;
$scope.docDefinition = {
content: [
{
text: 'Total Number',
style: 'header'
},
{
text: $scope.model.phone,
style: 'header'
},
{
text: $scope.model.selection,
style: 'header'
},
],
styles: {
header: {
fontSize: 18,
bold: true,
alignment: 'center'
},
subheader: {
fontSize: 15,
bold: true
},
table: {
margin: [0, 5, 0, 15]
},
quote: {
italics: true
},
small: {
fontSize: 8
}
} };
function fail(error) {
console.log(error.code);
};
function gotFS(fileSystem) {
var fileName = "your-file.pdf";
fileSystem.root.getFile(fileName, {
create: true,
exclusive: false
}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
currentfileEntry = fileEntry;
fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(writer) {
writer.onwrite = function (evt) {
$scope.downloading = false;
alert("The file was written successfully");
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFSforRead, fail);
}
writer.write(binaryArray);
}
$scope.createpdf = function(model) {
$localStorage.model = $scope.model;
console.log ($scope.docDefinition);
if (!window.cordova) {
pdfMake.createPdf($scope.docDefinition).open();
} else {
pdfMake.createPdf($scope.docDefinition).getBuffer(function (buffer) {
var utf8 = new Uint8Array(buffer); // Convert to UTF-8...
binaryArray = utf8.buffer; // Convert to Binary...
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
});
}
}
}]);
I've got an error message on console log like "undefined" for $scope.model.selection after trying generate to a PDF file but can show on list. For more scripts for this problem you can download my example code on my repo.
How I can fix it?
Source: (StackOverflow)
Is it possible, in Javascript, to run a function in background ?
I am generating a pdf with pdfmake tool in an angularJS app, but the pdf generation is quite long (3-4 seconds) and during this time, the ui freeze completely.
I would like to run a background task and force the pdf download without freezing the user ui, is it possible ?
Here how I am running pdfmake (pdfmake and _ are custom factories):
'use strict';
angular.module('App')
.service('CatalogPdfService', ['pdfmake', '_', '$q', '$filter',
function (pdfmake, _, $q, $filter) {
var $translate = $filter('translate');
var listDate = new Date();
return {
download: download
};
function download(data) {
listDate = _.first(data).publishedOn;
console.log('start download');
var deferred = $q.defer();
var filename = $translate('APP.EXPORT.pdf.catalog.title', {date: $filter('amDateFormat')(listDate, 'DDMMYYYY')}) + '.pdf';
create(data).download(filename, function () {
console.log('end download');
deferred.resolve();
});
return deferred.promise;
}
function create(data) {
// group data by category
var dataByCategory = _.groupBy(data, function (d) {
return d.category;
});
// group categories data by subcategory
_.forEach(dataByCategory, function (d, i) {
dataByCategory[i] = _.groupBy(d, function (d) {
return d.subcategory;
});
});
var content = {
table: {
headerRows: 1,
widths: ['*', 20, 10, 20, 20, 20, 20, 40, 20, 30],
body: [
[
{text: $translate('APP.EXPORT.pdf.catalog.header.article') , style: 'headings', alignment: 'left'},
{text: $translate('APP.EXPORT.pdf.catalog.header.mine') , style: 'headings'},
{text: $translate('APP.EXPORT.pdf.catalog.header.rank') , style: 'headings'},
{text: $translate('APP.EXPORT.pdf.catalog.header.origin') , style: 'headings'},
{text: $translate('APP.EXPORT.pdf.catalog.header.transporter') , style: 'headings'},
{text: $translate('APP.EXPORT.pdf.catalog.header.culture') , style: 'headings'},
{text: $translate('APP.EXPORT.pdf.catalog.header.label') , style: 'headings'},
{text: $translate('APP.EXPORT.pdf.catalog.header.unit') , style: 'headings'},
{text: $translate('APP.EXPORT.pdf.catalog.header.packing') , style: 'headings'},
{text: $translate('APP.EXPORT.pdf.catalog.header.price') , style: 'headings'}
]
]
},
layout: {
hLineWidth: function (i) {
return (i == 0) ? 0 : 1;
},
vLineWidth: function (i) {
return 0;
},
hLineColor: function (i, node) {
return '#ccc';
}
}
};
_.forEach(dataByCategory, function (data, category) {
content.table.body = content.table.body.concat(renderCategory(category, data));
});
var dd = {};
dd.content = renderHeader().concat(content);
dd.header = function (currentPage, pageCount) {
return {
text: $translate('APP.EXPORT.pdf.catalog.pagecount', {start: currentPage.toString(), end: pageCount.toString()}),
alignment: 'right',
color: '#666',
margin: [0, 20, 40, 0]
};
};
dd.styles = {
title: {
fontSize: 15,
bold: true
},
headings: {
italics: true,
alignment: 'center'
},
flag: {
alignment: 'center',
italics: true,
color: '#666'
},
category: {
bold: true,
fontSize: 12,
margin: [0, 10, 0, 0] // Left, Top, Right, Bottom
},
subcategory: {
bold: true,
fontSize: 10,
margin: [0, 7, 0, 5] // Left, Top, Right, Bottom
}
};
dd.defaultStyle = {
fontSize: 8
};
return pdfmake.createPdf(dd);
}
function renderHeader() {
return [
{image: logo(), height:40, width: 86},
{
margin: [0, 10, 0, 20],
table: {
widths: [100, 100, 100, '*'],
body: [
[
{text: $translate('APP.COMMON.address', {char: '\n'})},
{text: '\n' + $translate('APP.COMMON.phone')},
{text: '\n' + $translate('APP.COMMON.fax')},
{text: '\n' + $translate('APP.EXPORT.pdf.catalog.listno', {date: $filter('amDateFormat')(listDate, 'DD/MM/YYYY')}) , alignment: 'right'}
]
]
},
layout: {
hLineWidth: function (i) {
return (i == 0) ? 0 : 1;
},
vLineWidth: function (i) {
return 0;
}
}
}];
}
function renderCategory(name, data) {
var category = [
[
{text: name, style: 'category', colspan: 10},
'', '', '', '', '', '', '', '', ''
]
];
_.forEach(data, function (data, name) {
category = category.concat(renderSubcategory(name, data));
});
return category;
}
function renderSubcategory(name, data) {
var subcategory = [
[
{text: name, style: 'subcategory', colspan: 10},
'', '', '', '', '', '', '', '', ''
]
];
_.forEach(data, function (product) {
subcategory.push(renderProduct(product));
});
return subcategory;
}
function renderProduct(product) {
return [
product.name,
{
text: (product.isInPrivateList ? 'Oui' : ''),
style: 'flag'
},
{
text: (null === product.rank ? '' : String(product.rank)),
style: 'flag'
},
{
text: (product.origin || ''),
style: 'flag'
},
{
text: (product.transporter || ''),
style: 'flag'
},
{
text: (product.label || ''),
style: 'flag'
},
{
text: (product.culture || ''),
style: 'flag'
},
{
text: product.unit,
margin: [0, 0, 5, 0],
italics: true,
alignment: 'right'
},
{
text: (product.quantity || '1'),
italics: true,
fillColor: '#eee',
alignment: 'center'
},
{
text: product.unitPrice,
margin: [0, 0, 5, 0],
italics: true,
fillColor: '#eee',
alignment: 'right'
}
];
}
function logo() {
return 'data:image/jpeg;base64,blabla bigbase64 string'
}
}]);
Source: (StackOverflow)