typescript - Angular 4：如何從 Excel 讀取資料？

我無法從 Excel 工作表 在 Angular 4 獲取資料。以下是我的程式範例。

HTML 代碼：

<input id="my-file-selector" type="file" (change)="uploadData($event)" name="uploadExcel">

upload.component.ts：

public uploadData(event: any) : void { 
    // get data from file upload       
    let filesData = event.target.files;
    console.log(filesData[0]);
}

答案＃1

你應該遵循這三個步驟

步驟 1： 匯入 ts-xlsx，參考：https://www.npmjs.com/package/ts-xlsx 進行安裝

步驟 2： 使用 FileReader 轉換為 arraybuffer

步驟 3： 使用 XLSX 讀取 arraybuffer 並轉換為工作簿

HTML 代碼

<input type="file" style="display: inline-block;" (change)="incomingfile($event)" placeholder="Upload file" accept=".xlsx">
<button type="button" class="btn btn-info" (click)="Upload()" >Upload</button>

Typescript

//import it

    import * as XLSX from 'ts-xlsx';

//inside export class

arrayBuffer:any;
file:File;
incomingfile(event) 
  {
  this.file= event.target.files[0]; 
  }

 Upload() {
      let fileReader = new FileReader();
        fileReader.onload = (e) => {
            this.arrayBuffer = fileReader.result;
            var data = new Uint8Array(this.arrayBuffer);
            var arr = new Array();
            for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
            var bstr = arr.join("");
            var workbook = XLSX.read(bstr, {type:"binary"});
            var first_sheet_name = workbook.SheetNames[0];
            var worksheet = workbook.Sheets[first_sheet_name];
            console.log(XLSX.utils.sheet_to_json(worksheet,{raw:true}));
        }
        fileReader.readAsArrayBuffer(this.file);
}

答案＃2

您可以使用 npm 的 SheetJs/xlsx 套件，在 Angular/Ionic 中將 Excel 的資料取得為 JSON 物件。

只需按照以下步驟操作：

1) npm install --save xlsx

2) 現在在你的組件檔案中導入 xlsx

import * as XLSX from 'xlsx';

3) 現在將此函數附加到 file 類型 input 標籤的 change 事件中

onFileChange(event: any) {
    /* wire up file reader */
    const target: DataTransfer = <DataTransfer>(event.target);
    if (target.files.length !== 1) {
      throw new Error('Cannot use multiple files');
    }
    const reader: FileReader = new FileReader();
    reader.readAsBinaryString(target.files[0]);
    reader.onload = (e: any) => {
      /* create workbook */
      const binarystr: string = e.target.result;
      const wb: XLSX.WorkBook = XLSX.read(binarystr, { type: 'binary' });

      /* selected the first sheet */
      const wsname: string = wb.SheetNames[0];
      const ws: XLSX.WorkSheet = wb.Sheets[wsname];

      /* save data */
      const data = XLSX.utils.sheet_to_json(ws); // to get 2d array pass 2nd parameter as object {header: 1}
      console.log(data); // Data will be logged in array format containing objects
    };
 }

你也可以參考 xlsx 中提供的這些工具方法，根據你的需求執行不同的操作。

https://github.com/SheetJS/sheetjs#utility-functions

並且在讀取操作期間，你可以將這些解析選項放在物件內傳遞

https://github.com/SheetJS/sheetjs#parsing-options

如需其他資訊，請參考文件

https://github.com/SheetJS/sheetjs

希望這能幫助你或其他人。

答案＃3

此套件已被棄用：https://www.npmjs.com/package/ts-xlsx

使用 https://github.com/SheetJS/js-xlsx/。

以及 TypeScript 或 Angular 5：https://github.com/SheetJS/js-xlsx/tree/master/demos/typescript。

使用 import * as XLSX from 'xlsx';

然後按照回答中的步驟操作，它就能完美運作。