I have a application built with Angular JS, I would like to have a button that generates and downloads a pdf of a div area (this is just binded data)
This is close to what I would like, but it does not outline how this would be executed
Any help would be great, I have also tried jsPDF but that does not work well with Angular.
I have jsPDF working great within an angular application:
angular.module('YourApp')
.factory('InvoiceGenerator', function() {
return {
makeInvoice: function(subject, reference, from, to, /* whatever you need to print out... */ ) {
getLogo(window.location.origin+'/images/bot-objects-full-logo.png',
function(imgData) {
var doc = new window.jsPDF();
var x=0, y=0;
doc.addImage(imgData, 'PNG', 10, 10, 50, 15);
doc.setFontSize(12);
x=10;y=30;
from.forEach(function(line) {
doc.text(x, y, line);
y += 5;
});
x=145;y=50;
to.forEach(function(line) {
doc.text(x, y, line);
y += 5;
});
x=10;y=80; doc.text(x, y, 'Subject: '+subject);
y+=5; doc.text(x, y, 'Reference: '+reference);
doc.setLineWidth(0.5);
y=110; doc.line(20, y, 180, y); // horizontal line
/* do whatever you need to do with the other sutff you need to print out ... */
doc.save('foo.pdf');
});
}
}
}
then that code can be used across your project:
.controller('YourAppController',
['$scope', 'InvoiceGenerator',
function($scope, InvoiceGenerator)) {
$scope.printInvoice = function(invoice) {
InvoiceGenerator.makeInvoice('This is an invoice',
'IV1234',
['Your firm',
'your street',
'your city',
'your country'
],
['Your client',
'his street',
'his city',
'his country'
],
/* 'other stuff you want to printout' */
)
}
}
Then all you need to do is complete it according to your needs, and use it wherever you need.
So your assertion "I have also tried jsPDF but that does not work well with Angular." is wrong, you might just have an issue, so you should follow SO's way and show what you have tried to help us help you solve your issues.
