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

Question

我最近升级到 UI-Grid@4.2.4 以使用导出到 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 完成了这项工作。