Search code examples
javascriptangular2-servicesamcharts

How to customize the Header and footer for AmChart generated PDF?


I'm able to create a PDF which is already predefined in amChart library.

I want to create a header and footer with lines and page number. In my below code I'm just able to display text.

'export': {
                    'enabled': true,
                    'header': 'AnyText',
                    'footer': 'Page 1 of 1',
                    'dateFormat': 'YYYY-MM-DD HH:NN:SS',
                    'pageOrigin': false,
                    'fileName': 'Graph',
                    'menu': [{
                        'class': 'export-main',
                        'menu': [
                            'PDF',
                            'PRINT'
                        ]
                    }]
                }

How can I customize my header and footer by adding lines and spaces?

I went through the AmChart website but I didn't find any information (maybe I missed it).


Solution

  • AmCharts uses pdfMake under the hood for its PDF export functionality. To override the header and footer, you can pass in a pdfMake object, which is the same as the docDefinition object in the pdfMake documentation to override the layout or other settings such as headers and footers. Headers and footers can be static strings or dynamic functions that return objects with formatting information, e.g

    'export': {
      'enabled': true,
      'pdfMake': {
        'header': 'AnyText',
        'footer': function(currentPage, pageCount) {
          return {
            text: 'Page ' + currentPage + ' of ' + pageCount,
            alignment: 'center'
          }
        }
      }
      'dateFormat': 'YYYY-MM-DD HH:NN:SS',
      'pageOrigin': false,
      'fileName': 'Graph',
      'menu': [{
        'class': 'export-main',
        'menu': [
          'PDF',
          'PRINT'
        ]
      }]
    }