Description
I currently have a ui-grid table with over 100 columns and I'm having issue exporting this as a pdf.
At the moment, I am fitting the entire table (most tables are 10 columns) into one, landscape page but this does not work very well with tables with 100+ columns (in fact, crashes).
Let's say I have a table that looks a little something like this:
Col1 Col2 Col3 Col4 Col5 Col6 Col7 ................ ColN
data10 data20 data30 data40 data50 data60 data70 .................
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
Whenever I try to print tables with a large number of columns (around 20-25 columns), it comes out like this:
C C C ............................... ColumnN
o o o
l l l
u u u
m m m
n n n
1 2 3
The vertical letters doesn't look visually pleasing so I would like to export to pdf in 'pieces of columns' like so:
Column1 Column2 Column3
data10 data20 data30
data11 data21 data31
data12 data22 data32
data13 data23 data33
Page1
Column4 Column5 Column6
data40 data50 data60
data41 data51 data61
data42 data52 data62
data43 data53 data63
Page2
Column7 ................ ColumnN
data70 ................. dataN0
data71 ................. dataN1
data72 ................. dataN2
data73 ................. dataN3
Page3
Currently, my pdf export for 20column tables are visually displeasing and unusable for tables with 100+ columns. I would greatly appreciate any sort of help/advice concerning exporting with ui-grid!
My current code looks a something like this:
$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);
};
- This is a bug report, not a question on how to use the grid.
Use Stack Overflow or Gitter for questions. - You have searched the open issues to see if this bug has been filed before. We don't want duplicate issues.
- You have reviewed the tutorials and documentation to ensure you are using the grid correctly. ui-grid.info
- You are using the latest version of the grid. Older versions are not patched or supported.
- You have provided steps to recreate your bug. A plunkr is even better.