excel - Angular 5 上的 XLSX 缩小版?

标签 excel angular webpack angular5 xlsx

在 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();

它工作得很好,但在我的构建中产生了一个非常大的捆绑对象:
enter image description here

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

最佳答案

这就是我在 Angular 中的做法:

    import('xlsx').then(xlsx => {});
它仅在用户单击我的 excel 服务按钮时触发 :) 这似乎是“不好的做法”,但 xlsx不能真正正确地缩小..无论如何,它为我的捆绑包节省了 1.2MB!
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);
      }
    }

关于excel - Angular 5 上的 XLSX 缩小版?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50259058/

相关文章:

excel - 如何自动化电子表格

c# - 使用 C# 将 Sumif 公式添加到单元格错误

.net - 将 VSTO 功能公开给 VBA,无需本地管理

angular - 组件渲染后如何从指令中调用函数?

javascript - Angular 2.什么是渲染 : [ngClass] or class ="{{}}"? 更快

javascript - 如何使用 ES6 import 或 require 导入简单的 JS 脚本 "globally"?

reactjs - 无法解析另一个文件中的 Typescript 模块

c# - 遍历 Excel 范围并写入 .net 中的单元格

validation - Angular 2 强制对 keyup 进行自定义验证

reactjs - 使用webpack和react-router进行延迟加载和代码分割不加载