AngularJS：如何将ui-grid数据导出为ex​​cel？

我是新的angularJS和我想导出我的UI网格数据Excel文件，每个单元格中的每个值。 有可能的？ 怎么样？ 任何例子？

提前致谢。

Answer 1

我可以用js-xlsx和FileSaver来实现这个function

http://plnkr.co/edit/DVhIUgGD04yDXtjp7ReW

这个代码块是出口商服务。

(function () { 'use strict'; angular .module('app.utils') .factory('exportUiGridService', exportUiGridService); /* @ngInject */ function exportUiGridService(uiGridExporterService) { var service = { exportToExcel: exportToExcel }; return service; function Workbook() { if (!(this instanceof Workbook)) return new Workbook(); this.SheetNames = []; this.Sheets = {}; } function exportToExcel(sheetName, gridApi, rowTypes, colTypes) { var columns = gridApi.grid.options.showHeader ? uiGridExporterService.getColumnHeaders(gridApi.grid, colTypes) : []; var data = uiGridExporterService.getData(gridApi.grid, rowTypes, colTypes); var fileName = gridApi.grid.options.exporterExcelFilename ? gridApi.grid.options.exporterExcelFilename : 'dokuman'; fileName += '.xlsx'; var wb = new Workbook(), ws = sheetFromArrayUiGrid(data, columns); wb.SheetNames.push(sheetName); wb.Sheets[sheetName] = ws; var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'binary' }); saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), fileName); } function sheetFromArrayUiGrid(data, columns) { var ws = {}; var range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 } }; var C = 0; columns.forEach(function (c) { var v = c.displayName || c.name; addCell(range, v, 0, C, ws); C++; }, this); var R = 1; data.forEach(function (ds) { C = 0; ds.forEach(function (d) { var v = d.value; addCell(range, v, R, C, ws); C++; }); R++; }, this); if (range.sc < 10000000) ws['!ref'] = XLSX.utils.encode_range(range); return ws; } function datenum(v, date1904) { if (date1904) v += 1462; var epoch = Date.parse(v); return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000); } function s2ab(s) { var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; return buf; } function addCell(range, value, row, col, ws) { if (range.sr > row) range.sr = row; if (range.sc > col) range.sc = col; if (range.er < row) range.er = row; if (range.ec < col) range.ec = col; var cell = { v: value }; if (cell.v == null) cell.v = '-'; var cell_ref = XLSX.utils.encode_cell({ c: col, r: row }); if (typeof cell.v === 'number') cell.t = 'n'; else if (typeof cell.v === 'boolean') cell.t = 'b'; else if (cell.v instanceof Date) { cell.t = 'n'; cell.z = XLSX.SSF._table[14]; cell.v = datenum(cell.v); } else cell.t = 's'; ws[cell_ref] = cell; } } })(); 

这是网格菜单中的网格选项。

  ctrl.gridOptions = { appScopeProvider: ctrl, enableFiltering: true, enableColumnResizing: true, enableGridMenu: true, showGridFooter: true, showColumnFooter: true, exporterMenuCsv: false, columnDefs: [ . . . ], onRegisterApi: function (gridApi) { ctrl.gridApi = gridApi; }, gridMenuCustomItems: [{ title: 'Export all data as EXCEL', action: function ($event) { exportUiGridService.exportToExcel('Sheet 1', ctrl.gridApi, 'all', 'all'); }, order: 110 }, { title: 'Export visible data as EXCEL', action: function ($event) { exportUiGridService.exportToExcel('Sheet 1', ctrl.gridApi, 'visible', 'visible'); }, order: 111 } ] };