Question

我最近升级到UI-Grid@4.2.4以使用export to excel。这个问题是它希望ExcelBuiler是全局的，我使用的是webpack和typescript。包https://github.com/stephenliberty/excel-builder.js给出了构建错误，因此我使用了excel-builder-ts，因为我必须使用最新的jszip@3.1.5

由于它不是全局可用的，我只是模仿UI-Grid中的代码导出到excel，如下所示，并从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);
        });
    }

在columnDefs -

中

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

但问题是jszip抱怨“错误：没有指定输出类型。”

当我调试jszip代码时，无法将options扩展到opt以使类型为blob。

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

执行此操作时，opt.type为空，jszip抛出错误错误：未指定输出类型。

我真的很感激任何建议。

Answer 1

快速浏览一下excel-builder代码

https://github.com/TeamworkGuy2/excel-builder-ts/blob/master/ExcelBuilder.js

我可以看到它生成zip时它没有传递类型。也许这就是为什么需要旧版本的jszip？

return zip.generateAsync({
  base64: (!options || options.base64 !== false)
});

整个事情有点混乱，因为excel-builder项目被放弃了。如果维护ui-grid项目可能你可能会在他们的跟踪器上引发一个问题但是因为它是angular1.x我假设它可能不会那么活跃。

我建议尝试使用jszip和excel-builder的确切版本。你可以看到他们的bower.json

"excel-builder-js": "excelbuilder#^2.0.2",
"jszip": "~2.6.1"

如果使用其他excel库实现自己的excel导出很容易。在我们的团队中，我们使用exceljs做到了这一点。

使用angular-ui-grid@4.2.4导出到excel

1 个答案: