Search code examples
javascriptangularjspdfpdfmake

Creating and exporting a table using PDF MAKE


I created a UI grid and exported the grid to print as a pdf with the click of a button. I used these exporters:

        exporterHeaderFilterUseName: true,
        exporterLinkLabel: 'get your csv here',
        exporterPdfDefaultStyle: {fontSize: 9},
        exporterPdfTableStyle: {margin: [0, 5, 0, 15]},
        exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
        exporterPdfOrientation: 'portrait',
        exporterPdfPageSize: 'LETTER',
        exporterPdfMaxGridWidth: 475,

and this exporter for the header of each column:

            exporterHeaderFilter: function( displayName ) {
            if( displayName === 'routeName' ) { 
                  return 'Route'; 
                }
            if( displayName === 'mondayNet' ) { 
                  return 'MONDAY'; 
                }
            if( displayName === 'tuesdayNet' ) { 
                  return 'TUESDAY'; 
                }
            if( displayName === 'wednesdayNet' ) { 
                  return 'WEDNESDAY'; 
                }
            if( displayName === 'thursdayNet' ) { 
                  return 'THURSDAY'; 
                }
            if( displayName === 'fridayNet' ) { 
                  return 'FRIDAY'; 
            } 
            if( displayName === 'totalNet' ) { 
                  return 'TOTAL'; 
            }

            else { 
              return displayName;
            } 
          },

I want to create a header which contains more data about the grid. I want to create a table but I am not sure how to export it to the same pdf that shows with the ui grid. Here is how the table should be laid out:

var docDefinition = {
      content: [
        {

          table: {

            widths: [ '*', 'auto', 100, '*' ],

            body: [
              [ 'First', 'Second', 'Third', 'The last one' ],
              [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
              [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
            ]
          }
        }
      ]
    };

Any ideas how I can export this table to the same pdf with the ui grid? Thanks.


Solution

  • Got it! All I had to do was put the table inside the exporterPdfHeader which is also inside the ui grid

    exporterPdfHeader: {
                    margin: [15, 5, 15, 15],
                    table: {
    
                    widths: [ '*', '*', '*' ],
    
                    body: [
                      [ 'Region: ', 'Group: ', 'MC: ' ],
                      [ 'District #: ', 'Route #: ', 'Week Ending Date: ']
    
                    ]
                  }  
    
                },