要在 Angular 5 中读取和编辑 .xlsx
文件,你可以使用库 xlsx
npm install xlsx --save
import * as XLSX from 'xlsx';
import { ElementRef } from '@angular/core';
<input type="file" (change)="onFileChange($event)" style="display:none" #inputFile>
<button (click)="inputFile.click()">选择 Excel 文件</button>
onFileChange
,以便在用户上传文件时读取数据并将其存储在您选择的变量中:@ViewChild('inputFile') inputFile: ElementRef;
onFileChange(evt: any) {
const target: DataTransfer = <DataTransfer>(evt.target);
if (target.files.length !== 1) {
alert("只能上传一个文件");
return;
}
const reader: FileReader = new FileReader();
reader.onload = (e: any) => {
const bstr: string = e.target.result;
const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });
const wsname: string = wb.SheetNames[0];
const ws: XLSX.WorkSheet = wb.Sheets[wsname];
this.data = XLSX.utils.sheet_to_json(ws);
console.log(this.data);
};
reader.readAsBinaryString(target.files[0]);
}
这个方法将读取选择的 .xlsx 文件并将数据转换为 JSON 对象,然后存储在变量 data
中。您可以在之后将此数据显示在表格中或用它来进行其他操作。在我们的示例中,当文件读取成功时,将在控制台中输出读取到的数据。
您现在应该可以在 Angular 5 项目中读取和编辑 .xlsx
文件了。
领取专属 10元无门槛券
手把手带您无忧上云