AngularJS UI格導出爲PDF - 頁碼和PDF標題也離開了，但是電網是太對

Question

我下面這個教程：http://ui-grid.info/docs/#/tutorial/206_exporting_data

我使用angularjs UI電網。但是，當我將網格導出爲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")), 
     }; 

Answer 1

您需要保證金添加到頁眉和頁腳的風格，在你gridOptions，嘗試這樣的：

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