Post
Ask Question

Generate PDF Using PDF Make And AngularJS

PDF Make help us to generate the PDF, using JSON data. This blog uses Angular JS and PDF Make to generate the PDF. 
 
Prerequisites

  1. <html lang='en'>    
  2.  <head>    
  3.     <meta charset='utf-8'>    
  4.     <title>my first pdfmake example</title>  
  5.      
  6. <script src="Scripts/pdfmake/pdfmake.js"></script>  
  7. <script src="Scripts/pdfmake/vfs_fonts.js"></script>  
  8. <script src="Scripts/angular.js"></script>  
  9. <script src="Scripts/angular-ui-router.js"></script>  
  10.  </head>    

We need to create a document definition to create a PDF. 

  1. var docDefinition = { content: 'This is an sample PDF printed with pdfMake' }   
Style Libraries
 
The reusable style can be used, across the PDF document, using styles property.
  1. styles: {  
  2.                     'lineSpacing': {  
  3.                         margin: [0, 0, 0, 6]  
  4.                     },  
  5.                     'doublelineSpacing': {  
  6.                         margin: [0, 0, 0, 12]  
  7.                     },  
  8.                     'headingColor':  
  9.                     {  
  10.                         color: '#999966'  
  11.                     },  
  12.                     tableHeader: {  
  13.                         bold: true,  
  14.                         fontSize: 13,  
  15.                         color: '#669999'  
  16.                     }  
  17.                 }  
Header
  1. header: function() {  
  2.   
  3.                        return {  
  4.                            columns: [  
  5.                                {  
  6.                                 text:'Csharp' ,  
  7.                                    width: 200,  
  8.                                    margin: [50, 20, 5, 5]  
  9.                                },  
  10.                                {  
  11.                                    stack: [  
  12.                                        { text: 'Project Details', alignment: 'right', fontSize: 12, margin: [0, 30, 50, 0] }  
  13.                                    ]  
  14.                                }  
  15.                            ]  
  16.                        }  
  17.                    },  
In this example, the header is included inside the function. If there are multiple pages, the header is moving on, it will not happen within the function.
 
Footer
  1. footer: function (currentPage, pageCount) {  
  2.                        return {  
  3.                            stack: [{ canvas: [{ type: 'line', x1: 0, y1: 5, x2: 595, y2: 5, lineWidth: 1, lineColor: '#ffff00', style: ['lineSpacing'] }] },  
  4.                            { text: '', margin: [0, 0, 0, 5] },  
  5.                            {  
  6.                                columns: [  
  7.                                    {},  
  8.                                    { text: currentPage.toString(), alignment: 'center' },  
  9.                                    { text: moment(new Date()).format("DD-MMM-YYYY"), alignment: 'right', margin: [0, 0, 20, 0] }  
  10.                                ]  
  11.                            }]  
  12.   
  13.                        };  
  14.                    },  
Table
  1. return [  
  2.                { text: 'PDF Print Test', fontSize: 20, bold: false, alignment: 'center', style: ['lineSpacing', 'headingColor'] },  
  3.                { canvas: [{ type: 'line', x1: 0, y1: 5, x2: 595 - 2 * 40, y2: 5, lineWidth: 1, lineColor: '#990033', style: ['lineSpacing'] }] },  
  4.                {text:'',style:['doublelineSpacing']},  
  5.                {  
  6.                    table: {  
  7.                        widths: ['auto', 'auto', 'auto', 'auto'],  
  8.                        headerRows: 1,  
  9.                        // keepWithHeaderRows: 1,  
  10.                        body: [  
  11.                            ['Project', { text: 'Technology', style: 'tableHeader' },'Language','Database'],  
  12.                            ['Intranet', 'Microsoft', { text: 'Sharepoint', colSpan: 2 }, {}],  
  13.                            ['Online Jobs', 'Microsoft','Asp.Net','SQL Server']  
  14.                             
  15.                        ]  
  16.                    }, layout: getLayout()  
  17.                }  
  18.                 
  19.            ];  
Download PDF
  1. var date = new Date();  
  2.             date = moment(date).format('DD_MMM_YYYY_HH_mm_ss');  
  3.             pdfMake.createPdf(docDefinition).download('PDF_' + date + '.pdf');  
  4.             
  5. //pdfMake.createPdf(docDefinition).open(); //to open pdf in new window  
References
 
http://pdfmake.org/#/gettingstarted
Next Recommended Reading Generate a Component with Inline Template and Style using Angular CLI