CODEWITHSUNDEEP
angularjsangular-ui-grid
FullStackDeveloper
FullStackDeveloper

Reputation: 968

AngularJS ui-grid export to pdf - Page number and Pdf title too left, but grid is too right

I am following this tutorial: http://ui-grid.info/docs/#/tutorial/206_exporting_data

I am using angularjs ui grid. But when I export grid to pdf, UI is not look good. Problem: Page number and Pdf title is too left, but grid is too right

I tried to search the solution online, but no luck. This is my grid options setting:

gridOptions = {
            showGridFooter: true,
            showFooter: false,
            enableSorting: true,
            multiSelect: false,
            enableFiltering: true,
            enableRowSelection: true,
            enableSelectAll: false,
            enableRowHeaderSelection: false,
            enableGridMenu: true,
            noUnselect: true,
            onRegisterApi: function (_gridApi) {
                this.gridApi = _gridApi;
            },
            data: [],
            exporterCsvFilename: 'Report.csv',
            exporterPdfDefaultStyle: {fontSize: 9},
            exporterPdfTableStyle: {margin: [30, 30, 30, 30]},
            exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
            exporterPdfHeader: { text: "Foo", style: 'headerStyle' },
            exporterPdfFooter: function ( currentPage, pageCount ) {
                return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
            },
            exporterPdfCustomFormatter: function ( docDefinition ) {
                docDefinition.styles.headerStyle = { fontSize: 22, bold: true };
                docDefinition.styles.footerStyle = { fontSize: 10, bold: true };
                return docDefinition;
            },
            exporterPdfOrientation: 'portrait',
            exporterPdfPageSize: 'LETTER',
            exporterPdfMaxGridWidth: 500,
            exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
        };

enter image description here

Upvotes: 0

Views: 1422

Answers (1)

JoxieMedina
JoxieMedina

Reputation: 1013

You need to add a margin to the header and footer styles, in your gridOptions, try with something like this:

$scope.gridOptions = {
...
exporterPdfTableStyle: {margin: [20, 20, 20, 20]},
...
exporterPdfCustomFormatter: function ( docDefinition ) {
  docDefinition.styles.headerStyle = { margin: [30, 30, 30, 30],fontSize: 22, bold: true };
  docDefinition.styles.footerStyle = { margin: [30, 30, 30, 30],fontSize: 10, bold: true };
  return docDefinition;
},
...

Upvotes: 1

Related Questions