Angular 5上XLSX的缩小版本？

Question

是否有正确的方法在Angular 5项目中使用缩小的XLSX？

目前我将其用作：

import * as XLSX from 'xlsx';

使用此导入，如：

const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);

和

const workbook: XLSX.WorkBook = XLSX.utils.book_new();

它工作正常，但在我的构建中产生一个非常大的bundle对象：

我想知道是否可以使用.min文件，以帮助减少捆绑包大小。如果是这样，如何正确导入和使用它？

Answer 1

这是我在Angular中所做的：

import('xlsx').then(xlsx => {});

仅当用户单击我的excel服务按钮时才触发：)似乎是“不好的做法”，但xlsx不能真正缩小，无论如何，它为我省了 1.2 MB 放在我的捆绑包中！

在GitHub上的讨论：https://github.com/SheetJS/sheetjs/issues/694#issuecomment-688310069

获取类型需要额外（但又很容易）的工作-请阅读：How to use types with dynamic imports?

我受到这个开发人员的启发，他遇到了同样的问题：https://netbasal.com/using-typescript-dynamic-imports-in-angular-d210547484dd

import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';

// import * as XLSX from 'xlsx';
// import { utils, write } from 'xlsx';
// import { WorkSheet, WorkBook } from 'xlsx';

const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
const EXCEL_EXTENSION = '.xlsx';

@Injectable()
export class ExcelService {

  constructor() { }

  public exportAsExcelFile(arrOfObjs: {}[], excelFileName: string): void {
    import('xlsx').then(xlsx => {
      // console.log(xlsx);
      const worksheet: import('xlsx').WorkSheet = xlsx.utils.json_to_sheet(arrOfObjs);
      console.log('worksheet', worksheet);
      const wb: import('xlsx').WorkBook = { Sheets: { data: worksheet }, SheetNames: ['data'] };
      if (!wb.Workbook) { wb.Workbook = {}; }
      if (!wb.Workbook.Views) { wb.Workbook.Views = []; }
      if (!wb.Workbook.Views[0]) { wb.Workbook.Views[0] = {}; }
      wb.Workbook.Views[0].RTL = true;
      const excelBuffer: BlobPart = xlsx.write(wb, { bookType: 'xlsx', type: 'array' });
      this.saveAsExcelFile(excelBuffer, excelFileName);
    });
  }

  private saveAsExcelFile(buffer: BlobPart, fileName: string): void {
    const data: Blob = new Blob([buffer], {
      type: EXCEL_TYPE
    });
    FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
  }
}

Answer 2

我必须将这一行从 "module": "es2015" 更改为 "module": "esnext" in tsconfig.json 以使用此行

import('xlsx').then(xlsx => {

});

Answer 3

如果您不需要完整功能，可以使用迷你版。

在 dist/xlsx.mini.min.js 中生成了一个支持 XLSX / HTML 的更纤薄的构建。

代替

import * as XLSX from 'xlsx';

使用

import * as XLSX from 'xlsx/dist/xlsx.mini.min';