Как использовать горизонтальную нумерацию страниц для экспорта в PDF в UI-Grid? - PullRequest
Новая
       30

Как использовать горизонтальную нумерацию страниц для экспорта в PDF в UI-Grid?

0 голосов
/ 01 мая 2019

В настоящее время у меня есть таблица пользовательского интерфейса с более чем 100 столбцами, и у меня возникла проблема с экспортом в формате PDF.

В настоящее время я помещаю всю таблицу (большинство таблиц состоит из 10 столбцов) в одну альбомную страницу, но это не очень хорошо работает с таблицами с более чем 100 столбцами.

Допустим, у меня есть таблица, которая выглядит примерно так:

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

данные10 данные20 данные30 данные40 данные50 данные60 данные70 ................. dataN0

данные11 данные21 данные31 данные41 данные51 данные61 данные71 ................. данныеN1

данные12 данные22 данные32 данные42 данные52 данные62 данные72 ................. данныеN2

данные13 данные23 данные33 данные43 ​​данные53 данные63 данные73 ................. данныеN3

Всякий раз, когда я пытаюсь напечатать таблицы с большим количеством столбцов (около 20-25 столбцов), это выглядит так:

C C C ............................... Колонка N

o o o

l l l

u u u

м м м

n n n

1 2 3

Вертикальные буквы не выглядят визуально приятными, поэтому я хотел бы экспортировать в pdf в виде «кусочков столбцов» следующим образом:

Столбец1 Столбец2 Столбец3

data10 data20 data30

данные11 данные21 данные31

данные12 данные22 данные32

данные13 данные23 данные33

Page1

Столбец4 Столбец5 Столбец6

data40 data50 data60

данные41 данные51 данные61

данные42 данные52 данные62

данные43 ​​данные53 данные63

Page2

Столбец7 ................ СтолбецN

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

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

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

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

Page3

В настоящее время мой экспорт в PDF для таблиц с 20 столбцами визуально неприятен и непригоден для таблиц с более чем 100 столбцами. Я был бы очень признателен за любую помощь / совет, касающийся экспорта с помощью пользовательского интерфейса!

Мой текущий код выглядит примерно так: 

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