Angular加载Excel海量数据

        在项目中，有时候会遇到需要将数据从Excel中导入系统，需要前端页面加载Excel文件，读取内容进行展示。

        本篇介绍了在Angular程序中如何通过使用第三方库 xlsx.core.min.js 进行Excel文件的加载读取，以及海量数据的展示策略。

1、加载读取Excel文件

        首先在 index.html 中以CDN方式引入Excel操作库：

<script src="assets/js/xlsx.core.min.js"></script>

        再在页面中添加按钮用于文件选取，excel.component.html 中：

<div class="div-upload">
    <input type="file" id="upload" (change)="fileChange($event)" style="display:none" />
    <button (click)="selectFile()">选择Excel文件进行加载</button>
</div>

        excel.component.ts 中：

//按钮点击时触发上传控件点击事件
selectFile() {
    document.getElementById("upload")?.click();
}

        在上传控件的onchange事件中对Excel文件进行加载读取：

  // 文件选中事件
  fileChange(event: any) {
    const file = event.target.files[0];
    this.readXlsxFile(file);
  }
  //excel文件读取解析
  readXlsxFile(file:any){
    const reader = new FileReader();
    reader.onload = (e: any) => {
      const data = e.target['result'];
      const workbook = XLSX.read(data, { type: 'binary' });
      const sheetNames = workbook.SheetNames; // 工作表名称集合
      const worksheet = workbook.Sheets[sheetNames[0]]; // 这里只读取第一张sheet
      let xlsxData = XLSX.utils.sheet_to_json(worksheet) || []; //excel数据
      //将excel数据以页面需要的格式进行保存
      this.list = xlsxData.map((cell: any) => { return { value: cell['CODE'] }; });  
    };
    reader.readAsBinaryString(file);
  }

        这里，我们约定好的Excel文件格式如下图：

         以上代码执行后，我们就可以得到一个包含Excel数据的的数组：

         list : Array<{value:string}> 。

2、海量数据的展示

        接着上述代码，当list数组长度很大(按超过10000算)时，按照Angular的 *ngFor 指令绑定方式，如果一次性将 list 全部元素进行渲染展示将会出现很明显的卡顿现象，性能不好的浏览甚至可能会直接卡死。为此，我们可以采取分步渲染的方式进行展示，即一开始渲染一定数量的元素，用户操作滚动条滑动到一定边界时再加载渲染一定数量的元素，直到全部元素都加载渲染完。

        数据绑定代码：excel.component.html 中：

<div class="div-list" (scroll)="onScroll($event)">
    <span *ngFor="let item of displayList"> {{item.value}} </span>
</div>
<div>
    数据总条数： <span style="color:orange ;">{{length}}</span>
</div>

        在滚动条滚动事件中，检查滚动条位置，当滚动条位置超过70%滚动条长度时，触发一次加载数据动作：

   /**
   * 列表滚动事件
   */
  onScroll(event: any) {
    const scrollTop = event.target.scrollTop;
    const scrollHeight = event.target.scrollHeight;
    if (scrollTop / scrollHeight > 0.7) {
      this.loopRenderList(true);
    }
  }

        滚动事件触发的加载数据方法：

  /**
   * 显示的列表
   */
  displayList: Array<any> = [];
  /**
   * 全部列表
   */
  list: Array<any> = [];
  /**
   * 全部列表长度
   */
  length: number = 0;
  /**
   * 循环加载次数计数
   */
  loadCount: number = 0;
  /**
   * 每次调用循环加载次数
   */
  maxLoadCount: number = 2;
  /**
   * 单次加载的数据条数
   */
  onceLoadAmount: number = 100;
  
  /**
   * 从全部列表中取出部分数据进行渲染显示
   */
  loopRenderList(resetCount: boolean = false) {
    let timeout = 100;
    return new Promise<void>((resolve) => {
      if (this.list.length > 0) {
        if (resetCount) this.loadCount = 0;
        setTimeout(() => {
          this.loadCount++;
          if (this.loadCount > this.maxLoadCount) {
            return resolve();
          }
          if (this.list.length > this.onceLoadAmount) {
            this.displayList = [...this.displayList, ...this.list.splice(0, this.onceLoadAmount)];
            return this.loopRenderList();
          } else if (this.list.length >= 0) {
            this.displayList = [...this.displayList, ...this.list];
            this.list = [];
            return resolve();
          }
        }, timeout);
      }
    });
  }

        这里采用了循环的方式，每次从滚动事件调用都会加载2次，每次100条共计200条数据，直到全部数据加载完成。按照此方法就可以有效的避免海量数据一次渲染造成的页面卡顿。

        页面加载效果：

         以上代码就完成了海量数据的展示，大家可以根据自己的列表显示格式，数据量等，调整循环次数，单次加载数量、延迟时间等参数，使滚动渲染的效果更丝滑。

代码下载：Angular加载显示Excel海量数据-Web开发文档类资源-优快云下载  

包含 文件：