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

Question

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

出于特定原因，我需要将本地 Excel 文件存储在我的 PC 上，读取其内容并调用 API。而且一定是客户端.

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

How can I import a local excel file with js-xlsx in Angular 12?

注意：如果是possible/easier使用纯JavaScript对我也是有效的

Answer 1

这里正在工作Example

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);
}

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

Reading local Excel file with js-xlsx using Angular 12?

javascript

excel

angular

file

js-xlsx