javascript - 使用 Angular 12 使用 js-xlsx 读取本地 Excel 文件？

Question

我的 Angular-CLI 前端开发服务器在本地运行localhost:4200

出于特定原因，我需要获取存储在我的 PC 上的本地 Excel 文件，读取其内容并对 API 进行一些调用。它必须来自客户端。

我正在尝试使用 js-xlsx，安装了它，npm install xlsx但我找不到如何获取文件并读取其内容。

如何在 Angular 12 中使用 js-xlsx 导入本地 excel 文件？

注意：如果使用纯 JavaScript 可能/更容易，它对我也有效。

Answer 1

这是工作示例

onFileChange(ev) {
    let workBook = null;
    let jsonData = null;
    const reader = new FileReader();
    const file = ev.target.files[0];
    reader.onload = (event) => {
      const data = reader.result;
      workBook = XLSX.read(data, { type: 'binary' });
      jsonData = workBook.SheetNames.reduce((initial, name) => {
        const sheet = workBook.Sheets[name];
        initial[name] = XLSX.utils.sheet_to_json(sheet);
        return initial;
      }, {});
      const dataString = JSON.stringify(jsonData);
      document.getElementById('output').innerHTML = dataString.slice(0, 300).concat("...");
      this.setDownload(dataString);
    }
    reader.readAsBinaryString(file);
  }

Answer 2

就我而言，我想要像这样的数据

[['1','2'],['3','4']]

也像这样的数据

{'1':'3','2':'4'}

所以我做了以下代码

uploadFile(uploadedFile){
    let workBook = null;
    const reader = new FileReader();
    const file = uploadedFile[0];
    reader.onload = (event) => {
      const data = reader.result;
      workBook = XLSX.read(data, { type: 'binary' });
      const sheet_name_list = workBook.SheetNames;

      this.xlData = XLSX.utils.sheet_to_json(workBook.Sheets[sheet_name_list[0]]);
      log("xlData >>> ",JSON.stringify(this.xlData));

      this.arraySaparater = (XLSX.utils.sheet_to_json(workBook.Sheets[sheet_name_list[0]], { header: 1 }));
      this.arraySaparater = this.arraySaparater.filter((row)=>{
        if(Array.isArray(row) && row.length){
          return row;
        }
        else{
          return false;
        }
      });
      log('ArraySaparater >>>',JSON.stringify(this.arraySaparater));

    }
    reader.readAsBinaryString(file);
}