Angular JS generating PDF - any creator - maker modules?

Question

As title says, is there any PDF creator / generator for Angular?

I have seen https://github.com/MrRio/jsPDF, but can't find any for Angular. I want to make an html page to a pdf file for download.

I've the same question. I've tried jsPDF but it has some problems, like alignment issues. Sometimes it seems as if some layers overlap its parent's border and some times image does not appear. So, i was wondering if there is an AngularJS library or anyother alternative library/module for creating PDF out of the web page. — Temp O'rary, Jun 18 '15 at 04:48
Use this solution from a 99% similar question here: http://stackoverflow.com/questions/34049956/generate-pdf-from-html-using-pdfmake-in-angularjs — NaN, Jun 24 '16 at 13:52

score 6 · Accepted Answer · answered Jan 21 '15 at 16:55

6

You can wrap the JavaScript project you mentioned into a service that you call throughout your app. This is actually a rather standard practice and it also isolates your code if you ever need to change the underlying implementation .

answered Jan 21 '15 at 16:55

Enzey

5,254
1
18
20

13

How can this be achieved? – Sole Aug 21 '15 at 14:00

score 5 · Answer 2 · answered Jun 10 '15 at 19:45

5

Looks like @Mike had it close there. A few quick changes generated a decent looking file and brought up a print pop-up.

1 - Give the area that you want to print an ID of 'printArea'

2 - Add the $window service

$scope.printIt = function(){
   var table = document.getElementById('printArea').innerHTML;
   var myWindow = $window.open('', '', 'width=800, height=600');
   myWindow.document.write(table);
   myWindow.print();
};

answered Jun 10 '15 at 19:45

stackSean

131
1
6

This is a good idea. But what I am looking for is a solution similar to "Export to excel" where the user clicks a button and the file gets downloaded for you. Only in my case I want an "Export to PDF" option. – Temp O'rary Jun 18 '15 at 04:51

score 1 · Answer 3 · answered Jan 26 '15 at 10:30

1

You can use window.print() which prints current HTML document. Use media queries to adjust styles document. You can build your document in fly and call print anytime you want

@media print { 
 /* All your print styles go here */
 #header, #footer, #nav { display: none !important; } 
}

Some code from one of my project, print's only content from table:

 $scope.print = function () {
    console.log('modal print');

    var table = document.querySelector('.CSSTableGenerator').innerHTML;
    var myWindow = window.open('', '', 'width=800, height=600');
    myWindow.document.write(table);
    myWindow.print();

  };

answered Jan 26 '15 at 10:30

Mike

447
4
15

Can you put a fiddle together for this? Abit confused as to how this would work? – Sole Aug 21 '15 at 11:36
Hi Mike, how would this example work within Angular JS, also I want to save not print? – Sole Sep 04 '15 at 11:27
This example will work with AngularJS, you just have to find element programatically, put its content to iframe and print, like in example. You can't skip this print dialog with settings, its up to browser. SO maybe you should use jsPDF, it seems to be easy adjustable with angular, just say when/where do you want trigger print so I will try to help. You can provide some code. – Mike Sep 04 '15 at 15:03

score 1 · Answer 4 · answered Dec 22 '16 at 19:48

1

There's this Angular directive wrapping up jsPDF functionality:

https://github.com/sayanee/angularjs-pdf

answered Dec 22 '16 at 19:48

Juan Jimenez

5,812
6
28
37

Angular JS generating PDF - any creator - maker modules?

4 Answers4

Linked