CODEWITHSUNDEEP
javascriptangularjstypeerrorangular-ui-grid
Ivanochka Savchuck
Ivanochka Savchuck

Reputation: 3

ui-grid table PDF export

I need to export ui-grid table, I did all like this http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex, in result, cvc export works, but pdf export doesn't work. In cosole I get error: "pdfmake.min.js:1 Uncaught TypeError: Cannot read property 'location' of null" How I can resolve this problem?

(P.S. PDF export doesn't work only with custom UI, with ui-grid menu it works)

class UserTableController {
   constructor(FiredbAutorisation, $scope) {
   'ngInject';
  this.FiredbAutorisation = FiredbAutorisation;
  this.FiredbAutorisation.responseData().then(res => {
  this.userData = res.userData;
  });

 this.users = this.FiredbAutorisation.getUserDetails();
 this.scope = $scope;


 this.gridOptions = {
  enableFiltering: true,
  exporterMenuCsv: true,
  enableGridMenu: true,
  enableSorting: true,
  enableSelectAll: true,
  exporterOlderExcelCompatibility: true,
  exporterCsvFilename: 'userDetails.csv',
  exporterPdfDefaultStyle: {fontSize: 9},
  exporterPdfTableStyle: {margin: [30, 30, 30, 30]},
  exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'blue'},
  exporterPdfHeader: { text: 'Users Details Table', 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: 'landscape',
  exporterPdfPageSize: 'LETTER',
  exporterPdfMaxGridWidth: 600,
  exporterCsvLinkElement: angular.element(document.querySelectorAll('.custom-csv-link-location')),

  onRegisterApi: function(gridApi){
    $scope.gridApi = gridApi;

  },


  columnDefs: [
      { name:'Name', enableSorting: true, field: 'name'},
      { name:'Surname', enableSorting: true, field: 'surname'},
      { name:'Nickname', enableSorting: true,  field: 'login'},
      { name:'Birth Date', enableSorting: true, field: 'birthDate'},
      { name:'Email', enableSorting: true, width:230, field: 'email'},
      { name:'Country', enableSorting: true, field: 'country'},
      { name:'City', enableSorting: true, field: 'city'},
      { name:'Registration date', enableSorting: true, width:150, field: 'signUpDate'},
      { name:'Number of Inputs', enableSorting: true, width:200,  field: 'logInCount'},


    ],
     data: this.users
  };

}



 export(exportData){
  this.export_format = exportData.format;
  this.export_column_typee = exportData.column;
  this.export_row_type = exportData.raw;

 if (this.export_format === 'csv') {
  let myElement = angular.element(document.querySelectorAll('.custom-csv-link-location'));
  this.scope.gridApi.exporter.csvExport( this.export_row_type, this.export_column_type, myElement );
} else if (this.export_format === 'pdf') {
  this.scope.gridApi.exporter.pdfExport( this.export_row_type, this.export_column_type );
  };    };     }

export default UserTableController;

exportData it is data about format,column,raw, which I get from md-dialog, which is situated in other component

Upvotes: 0

Views: 2322

Answers (1)

Pikesh Prasoon
Pikesh Prasoon

Reputation: 387

I faced the similar issue!

You need to include both pdfmake.min.js and vfs_fonts.js (https://github.com/bpampuch/pdfmake)

Upvotes: 2

Related Questions