Angular 4：如何从Excel读取数据？

发布时间：2020-12-17 06:56:57 所属栏目：安全来源：网络整理

导读：我无法从Angular 4中的Excel工作表中获取数据. 下面是我的代码示例. HTML代码： input id="my-file-selector" type="file" (change)="uploadData($event)" name="uploadExcel" upload.component.ts： public uploadData(event: any) : void { // get data fr

我无法从Angular 4中的Excel工作表中获取数据.
下面是我的代码示例.

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

解决方法

你应该遵循这3个步骤

第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>

打字稿

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!