如何在ui-grid中使用水平分页进行pdf导出?

时间:2019-05-01 14:45:46

标签: javascript angularjs angular-ui-grid ui-grid

我目前有一个超过100列的ui-grid表,但在将其导出为pdf时遇到问题。

目前,我正在将整个表(大多数表为10列)装入一个横向页面,但这不适用于100列以上的表。

假设我有一张看起来像这样的桌子:

Col1 Col2 Col3 Col4 Col5 Col6 > Col7 ................ ColN

数据10数据20数据30数据40数据50数据60数据70 ................. dataN0

data11 data21 data31 data41 data51 data61 data71 ................. dataN1

data12 data22 data32 data42 data52 data62 data72 ................. dataN2

data13 data23 data33 data43 data53 data63 data73 ................. dataN3

每当我尝试打印具有大量列(大约20至25列)的表时,结果都是这样的:

C C C ...............................列N

o o o o

l l lp

uüu

m m m

n n n

1 2 2 3

垂直字母在视觉上看起来并不令人满意,因此我想将“列数”中的pdf导出为

列1 列2 列3

data10数据20数据

data11 data21 data31

data12 data22 data32

data13 data23 data33

第1页的第p

第4列 第5列 第6列

data40数据50数据60

data41 data51 data61

data42 data52数据62

data43 data53 data63

第2页第p

第7列 ................ 第N列

data70 ................. dataN0

data71 ................................ dataN1

data72 ................................ dataN2

data73 ................. dataN3

第3页

目前,我的20列表格的pdf导出在视觉上令人不快,无法用于100列以上的表格。我非常感谢有关使用ui-grid导出的任何帮助/建议!

我当前的代码看起来像这样:

$scope.gridOptions= {
  enableGridMenu: true,
  enableSelectAll: true,
  exporterCsvFilename: 'Report.csv',
  enableColumnMenus : false,
  enableColumnResizing: true,

  exporterPdfDefaultStyle: {fontSize: 9},
  //need this to center grid
  exporterPdfTableStyle: {margin: [-40, -10, -10, -20]},
  exporterExcelFilename: 'myFile.xlsx',
  exporterExcelSheetName: 'Sheet1',
  exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: 
                                true, color: 'red'},
  exporterPdfHeader: {  text: "", style: 'headerStyle'},
  //Allows external buttons to be pressed for exporting
  onRegisterApi: function(gridApi){$scope.gridApi = gridApi;
                                   },
  exporterPdfMaxGridWidth: 680,
  exporterPdfFooter: function ( currentPage, pageCount ) {
      return { text: 'Page ' + currentPage.toString() + ' of ' + 
              pageCount.toString(), style: 'footerStyle' };
              },
  exporterFieldCallback: function (grid, row, col, value) {
      return grid.getCellDisplayValue(row, col);
      }

  };

  $scope.exportCsv = function() {
    var grid = $scope.gridApi.grid;
    var rowTypes = uiGridExporterConstants.ALL;
    var colTypes = uiGridExporterConstants.ALL;
    uiGridExporterService.csvExport(grid, rowTypes, colTypes);
  };

  $scope.exportPdf = function() {
    var grid = $scope.gridApi.grid;
    var rowTypes = uiGridExporterConstants.ALL;
    var colTypes = uiGridExporterConstants.ALL;
    uiGridExporterService.pdfExport(grid, rowTypes, colTypes);
  };

0 个答案:

没有答案