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>
  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() {
  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. }]
  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']
  15. ]
  16. }, layout: getLayout()
  17. }
  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');
  5. //pdfMake.createPdf(docDefinition).open(); //to open pdf in new window
References
http://pdfmake.org/#/gettingstarted