-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Excel export): Excel export (#6199)
* Initial checkin of export to excel. No examples or unit tests * Eliminate $$hashKey and uidPrefix = 'uiGrid' from export * Sheet name cannot be empty string or it causes export errors. Default to 'Sheet1' * Additional languages * Add documentation * fix syntax causing lint errors. Check if not a tree when exporting to prevent error * Updated example with colors * Update unit tests and fix the lodash version for import to remove ambiguity.
- Loading branch information
1 parent
97e0ffa
commit dc7d773
Showing
19 changed files
with
557 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
152 changes: 152 additions & 0 deletions
152
misc/tutorial/410_excel_exporting_data_and_header.ngdoc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| @ngdoc overview | ||
| @name Tutorial: 410 Exporting Data with Fonts, Colors and Header in Excel | ||
| @description | ||
|
|
||
| <div class="alert alert-success" role="alert"><strong>Stable</strong> This feature is stable. There should no longer be breaking api changes without a deprecation warning.</div> | ||
|
|
||
| The exporter feature allows data to be exported from the grid in | ||
| excel format with a header. The exporter can export all data, visible data or selected data. | ||
|
|
||
| To use the exporter you need to include the ui-grid-exporter directive on | ||
| your grid. If you want to export selected rows you must include the ui-grid-selection | ||
| directive on your grid. | ||
|
|
||
| If you want to export as Excel you need to have installed Excel-Builder which also uses lodash and jszip, | ||
| available through: | ||
| <pre> bower install lodash | ||
| bower install jszip#2.6.1 | ||
| bower install excelbuilder </pre> | ||
|
|
||
| The options and API for exporter can be found at {@link api/ui.grid.exporter ui.grid.exporter}, and | ||
|
|
||
| - {@link api/ui.grid.exporter.api:ColumnDef columnDef} | ||
| - {@link api/ui.grid.exporter.api:GridOptions gridOptions} | ||
| - {@link api/ui.grid.exporter.api:PublicApi publicApi} | ||
|
|
||
| The exporter adds menu items to the grid menu, to use the native UI you need to enable | ||
| the grid menu using the gridOption `enableGridMenu` | ||
|
|
||
| Note that the option to export selected data is only visible if you have data selected. | ||
|
|
||
| Additionally, information about the Excel Builder may be found at https://github.com/stephenliberty/excel-builder.js. | ||
|
|
||
| If the example below we show how to make a custom header based on a callback method and | ||
|
|
||
|
|
||
| @example | ||
| In this example we use the native grid menu buttons, and we show the pdf, csv and excel export options. | ||
|
|
||
| <example module="app"> | ||
| <file name="app.js"> | ||
| var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.exporter']); | ||
|
|
||
| app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { | ||
|
|
||
| $scope.formatters = {}; | ||
|
|
||
| $scope.gridOptions = { | ||
| columnDefs: [ | ||
| { field: 'name' }, | ||
| { field: 'gender', visible: false}, | ||
| { field: 'company' } | ||
| ], | ||
| enableGridMenu: true, | ||
| enableSelectAll: true, | ||
| exporterCsvFilename: 'myFile.csv', | ||
| exporterPdfDefaultStyle: {fontSize: 9}, | ||
| exporterPdfTableStyle: {margin: [30, 30, 30, 30]}, | ||
| exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'}, | ||
| exporterPdfHeader: { text: "My Header", 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")), | ||
| exporterExcelFilename: 'myFile.xlsx', | ||
| exporterExcelSheetName: 'Sheet1', | ||
| exporterExcelCustomFormatters: function ( grid, workbook, docDefinition ) { | ||
|
|
||
| var stylesheet = workbook.getStyleSheet(); | ||
| var aFormatDefn = { | ||
| "font": { "size": 9, "fontName": "Calibri", "bold": true }, | ||
| "alignment": { "wrapText": true } | ||
| }; | ||
| var formatter = stylesheet.createFormat(aFormatDefn); | ||
| // save the formatter | ||
| $scope.formatters['bold'] = formatter; | ||
|
|
||
| aFormatDefn = { | ||
| "font": { "size": 9, "fontName": "Calibri" }, | ||
| "fill": { "type": "pattern", "patternType": "solid", "fgColor": "FFFFC7CE" }, | ||
| "alignment": { "wrapText": true } | ||
| }; | ||
| formatter = stylesheet.createFormat(aFormatDefn); | ||
| // save the formatter | ||
| $scope.formatters['red'] = formatter; | ||
|
|
||
| Object.assign(docDefinition.styles , $scope.formatters); | ||
|
|
||
| return docDefinition; | ||
| }, | ||
| exporterExcelHeader: function (grid, workbook, sheet, docDefinition) { | ||
| // this can be defined outside this method | ||
| var stylesheet = workbook.getStyleSheet(); | ||
| var aFormatDefn = { | ||
| "font": { "size": 9, "fontName": "Calibri", "bold": true }, | ||
| "alignment": { "wrapText": true } | ||
| }; | ||
| var formatterId = stylesheet.createFormat(aFormatDefn); | ||
|
|
||
| sheet.mergeCells('B1', 'C1'); | ||
| var cols = []; | ||
| cols.push({ value: '' }); | ||
| cols.push({ value: 'My header that is long enough to wrap', metadata: {style: formatterId.id} }); | ||
| sheet.data.push(cols); | ||
| }, | ||
| exporterFieldFormatCallback: function(grid, row, gridCol, cellValue) { | ||
| // set metadata on export data to set format id. See exportExcelHeader config above for example of creating | ||
| // a formatter and obtaining the id | ||
| var formatterId = null; | ||
| if (cellValue && cellValue.startsWith('W')) { | ||
| formatterId = $scope.formatters['red'].id; | ||
| } | ||
|
|
||
| if (formatterId) { | ||
| return {metadata: {style: formatterId}}; | ||
| } else { | ||
| return null; | ||
| } | ||
| }, | ||
| onRegisterApi: function(gridApi){ | ||
| $scope.gridApi = gridApi; | ||
| } | ||
| }; | ||
|
|
||
| $http.get('/data/100.json') | ||
| .success(function(data) { | ||
| $scope.gridOptions.data = data; | ||
| }); | ||
|
|
||
| }]); | ||
| </file> | ||
|
|
||
| <file name="index.html"> | ||
| <div ng-controller="MainCtrl"> | ||
| <div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid"></div> | ||
| </div> | ||
| </file> | ||
|
|
||
| <file name="main.css"> | ||
| .grid { | ||
| width: 500px; | ||
| height: 400px; | ||
| } | ||
| </file> | ||
| </example> |
Oops, something went wrong.