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