ui-grid表格PDF导出

Question

我需要导出 ui-grid 表，我都喜欢这个http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex，结果，cvc 导出工作，但 pdf 导出不起作用。 在 cosole 中出现错误：“pdfmake.min.js:1 Uncaught TypeError: Cannot read property 'location' of null” 我该如何解决这个问题？

（P.S. PDF 导出不仅适用于自定义 UI，还适用于 ui-grid 菜单）

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 它是关于格式、列、原始的数据，我从位于其他组件中的 md-dialog 获得的

Answer 1

我遇到了类似的问题！

您需要同时包含 pdfmake.min.js 和 vfs_fonts.js (https://github.com/bpampuch/pdfmake)