使用 XLSX 加载 Excel 文件内容并将其显示为 HTML Table Angular

Question

我想要的：

我正在尝试加载 excel 文件并将其内容显示为 HTML 元素。显然，一切正常（控制台日志打印出正确的数据）。

问题

Excel 内容不会显示在 HTML 直到您上传两次 文件！

一些线索

使用这个例子：https://stackblitz.com/edit/angular-excel-read-table?file=src%2Fapp%2Fsheet.component.ts

Excel 内容加载第二次代码传递抛出：reader.readAsBinaryString(changeEvent.target.files[0]);

import * as XLSX from 'xlsx';

type AOA = any[][];

  data: AOA = [
    ['default']
  ];

  onFileChange(changeEvent: any) {

    const reader = new FileReader();

    reader.onload = () => {

      const wb = XLSX.read(reader.result, { type: 'binary' });
      
      const firstSheetName = wb.SheetNames[0];
      const firstSheetWBook = wb.Sheets[firstSheetName];

      this.data = <AOA>(XLSX.utils.sheet_to_json(firstSheetWBook, { header: 1 }));
      console.log(this.data) // prints correct data at console
    };

    reader.readAsBinaryString(changeEvent.target.files[0]);

  }

<input type="file" (change)="onFileChange($event)" multiple="false">
<span>{{ data }}</span>

Answer 1

这可能是因为 reader.onload “在 Angular 的世界之外”，所以 Angular 没有接受零钱。

强制 Angular 刷新并获取更改的解决方法是使用 NgZone。试试这个：

import { Component, NgZone } from '@angular/core';
    
constructor(private ngZone: NgZone) { }

console.log(this.data) // prints correct data at console
this.ngZone.run(() => {});

Answer 2

你不应该使用 readAsArrayBuffer MDN 状态：

Note that this method was once removed from the File API specification, but re-introduced for backward compatibility. Using FileReader.readAsArrayBuffer() is recommended.

但是，也不鼓励使用 FileReader，因为您也可以在 blob 上使用新的读取方法。 NodeJS v15.7 内置了 blob，但没有 FileReader 因为它被认为是遗留的 api 现在有新的读取方法

示例如下：

import * as XLSX from 'xlsx';

async function onFileChange (evt) {
  const buffer = await evt.target.files[0].arrayBuffer()
  const wb = XLSX.read(buffer);
  
  const firstSheetName = wb.SheetNames[0];
  const firstSheetWBook = wb.Sheets[firstSheetName];

  this.data = XLSX.utils.sheet_to_json(firstSheetWBook, { header: 1 });
  console.log(this.data) // prints correct data at console
}

使用 XLSX 加载 Excel 文件内容并将其显示为 HTML Table Angular

Load and Show Excel File Contents as HTML Table Angular with XLSX

javascript

excel

xlsx

typescript

angular