AngularJS와 PDF로 UI 그리드 수출 - 페이지 번호와 PDF 파일의 제목이 너무 왼쪽으로하지만 그리드는

Question

나는이 자습서 다음하고 너무 권리입니다 : 내가 AngularJS와 UI 그리드를 사용하고 http://ui-grid.info/docs/#/tutorial/206_exporting_data

. 그러나 그리드를 pdf로 내보낼 때 UI가 좋지 않습니다. 문제 : 페이지 번호와 Pdf 제목이 너무 왼쪽이지만 그리드가 너무 오른쪽

나는 솔루션을 온라인으로 검색하려고했지만 운이 없다. 이는 내 그리드 옵션 설정입니다 :

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")), 
     }; 

당신은 이런 일에, 당신의 gridOptions에, 머리글과 바닥 글 스타일에 마진을 추가하려고 할 필요가

Answer 1

:

$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; 
}, 
...