ui-grid 테이블 PDF 내보내기

Question

ui-grid 테이블을 내보낼 필요가 있습니다.이 결과는 모두 http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex입니다. 따라서 cvc 내보내기가 작동하지만 pdf 내보내기가 작동하지 않습니다. cosole에서 오류가 발생합니다. "pdfmake.min.js : 1 잡히지 않은 TypeError : null의 of 'location'을 읽을 수 없습니다. 어떻게이 문제를 해결할 수 있습니까?

는

그것이 내가 MD-대화 상자에서 얻을 형식, 열, 원료에 대한 데이터입니다

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 (PS의 PDF 내보내기 UI 그리드 메뉴 작동으로, 사용자 정의 UI에서만 작동하지 않습니다) , 다른 구성 요소에 위치하고 있습니다

Answer 1

나는 비슷한 문제에 직면하게되었습니다!

당신은