angular-ui/ui-grid

Exporting to excel with angular-ui-grid@4.2.4

Open

#6,581 建立於 2018年2月20日

在 GitHub 查看
 (0 留言) (0 反應) (0 負責人)JavaScript (5,395 star) (2,496 fork)batch import
difficulty: hardhelp wantedtypescript

描述

I recently upgraded to UI-Grid@4.2.4 to use export to excel. The issue with this is it expects ExcelBuiler to be global, I am using webpack and typescript. Package https://github.com/stephenliberty/excel-builder.js gives build error so I used excel-builder-ts instead because of which I have to use latest jszip@3.1.5

Since it is not available globally, I just mimic code from UI-Grid to export to excel as follows and call it from gridMenuCustomItems

`var jszip = require('jszip'); var ExcelBuilder = require('excel-builder-ts/ExcelBuilder.js');

public exportExcel(): void { var exportColumnHeaders = this.gridApi.grid.options.showHeader ? this.uiGridExporterService.getColumnHeaders(this.gridApi.grid, this.uiGridExporterConstants.ALL) : [];

    var workbook = ExcelBuilder.createWorkbook();
    var aName = this.gridApi.grid.options.exporterExcelSheetName ? this.gridApi.grid.options.exporterExcelSheetName : 'Sheet1';
    var sheet = workbook.createWorksheet({ name: aName });
    workbook.addWorksheet(sheet);
    var docDefinition = this.uiGridExporterService.prepareAsExcel(this.gridApi.grid, workbook, sheet);

    // The standard column width in Microsoft Excel 2000 is 8.43 characters based on fixed-width Courier font
    // Width of 10 in excel is 75 pixels
    var colWidths = [];
    var startDataIndex = this.gridApi.grid.treeBase ? this.gridApi.grid.treeBase.numberLevels : (this.gridApi.grid.enableRowSelection !== false ? 1 : 0);
    for (var i = startDataIndex; i < this.gridApi.grid.columns.length; i++) {
        colWidths.push({ width: (this.gridApi.grid.columns[i].drawnWidth / 75) * 10 });
    }
    sheet.setColumns(colWidths);

    var exportData = this.uiGridExporterService.getData(this.gridApi.grid, this.uiGridExporterConstants.ALL, this.uiGridExporterConstants.ALL, this.gridApi.grid.options.exporterFieldApplyFilters);

    var excelContent = this.uiGridExporterService.formatAsExcel(exportColumnHeaders, exportData, workbook, sheet, docDefinition);
    sheet.setData(sheet.data.concat(excelContent));

    let options = { type: 'blob', base64: true }

    ExcelBuilder.createFile(jszip, workbook, options).then((result) => {
        this.uiGridExporterService.downloadFile(
            this.gridApi.grid.options.exporterExcelFilename,
            result,
            this.gridApi.grid.options.exporterCsvColumnSeparator,
            this.gridApi.grid.options.exporterOlderExcelCompatibility);
    });
}`

And in columnDefs - columnDefs: [ gridMenuCustomItems: [ { title: this.gettextCatalog.getString('Export all data as custom'), order: 210, action: (($event) => { this.exportExcel(); }) } ] ]

But the issue with this is jszip is complaining "Error: No output type specified." When I debug jszip code following is not able to extend options to opt to have type as blob.

opts = utils.extend(options || {}, { streamFiles: false, compression: "STORE", compressionOptions : null, type: "", platform: "DOS", comment: null, mimeType: 'application/zip', encodeFileName: utf8.utf8encode });

when this executes opt.type is empty and jszip throws error Error: No output type specified.

I would really appreciate any suggestion.

貢獻者指南