AngularJS PDFへのUIグリッドのエクスポート - あまりにも左ページ番号とPDFのタイトルが、グリッドが

Question

あまりにも右である私は、このチュートリアルの次のです：http://ui-grid.info/docs/#/tutorial/206_exporting_data

私はangularjs UIのグリッドを使用しています。しかし、私はPDFにグリッドをエクスポートすると、UIは良く見えません。 問題：ページ番号とPDFのタイトルがあまりにも残っていないが、私はオンラインソリューションを検索してみました

グリッドはあまりにも右ですが、運されます。これは私のグリッドオプションの設定です：

あなたの gridOptionsに、このような何かをしようと、ヘッダーとフッターのスタイルにマージンを追加する必要が

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

：

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