Javascript 如何在angular中读取和验证excel文件

当前我可以读取excel，但无法验证，如果用户选择其他文件而不是excel文件，则需要弹出一个“请仅选择excel文件”的弹出窗口

Component.html

<input type="file" accept=".xlsx" class="btn btn-success" (change)="onFileChange($event)">

<button type="file" class="btn dark btn-outline" 
  (click)="uploadfile()">Upload</button>

上载

组件技术

 data=[];
 onFileChange(evt: any) {
    debugger
    /* wire up file reader */
    const target: DataTransfer = <DataTransfer>(evt.target);
    if (target.files.length == 1 && evt.target.accept === ".xlsx" ){
    const reader: FileReader = new FileReader();
    reader.onload = (e: any) => {
      /* read workbook */
      const bstr: string = e.target.result;
      const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'binary'});
      console.log(wb);
      /* grab first sheet */
      const wsname: string = wb.SheetNames[0];
      const ws: XLSX.WorkSheet = wb.Sheets[wsname];
      /* save data */
      this.data = <any>(XLSX.utils.sheet_to_json(ws, {header: 1}));
    };
    reader.readAsBinaryString(target.files[0]);

   }
  }
------
uploadfile() {
    let keys = this.data.shift();
    let resArr = this.data.map((e) => {
        let obj = {};
        keys.forEach((key, i) => {
            obj[key] = e[i];
        });
        return obj;
    });
    console.log(resArr);
    const _data = {
        data: resArr
    }
    this.cinemaService.newoperater(_data).subscribe();
  }

data=[]；
onFileChange（evt:any）{
调试器
/*连接文件读取器*/
常量目标：数据传输=（evt.target）；
if（target.files.length==1&&evt.target.accept===“.xlsx”）{
常量读取器：FileReader=newfilereader（）；
reader.onload=（e:any）=>{
/*阅读工作手册*/
常量bstr:string=e.target.result；
常量wb:XLSX.WorkBook=XLSX.read（bstr，{type:'binary'}）；
控制台日志（wb）；
/*抢第一张*/
const wsname:string=wb.SheetNames[0]；
const ws:XLSX.WorkSheet=wb.Sheets[wsname]；
/*保存数据*/
this.data=（XLSX.utils.sheet_to_json（ws，{header:1}））；
};
reader.readAsBinaryString（target.files[0]）；
}
}
------
上传文件（）{
让keys=this.data.shift（）；
让resArr=this.data.map（（e）=>{
设obj={}；
keys.forEach（（key，i）=>{
obj[key]=e[i]；
});
返回obj；
});
console.log（resArr）；
常数_数据={
数据：resArr
}
this.cinemaService.newoperater（_data.subscribe（）；
}

onFileChange（）

此方法将读取数据&

uploadfile（）

此方法将数组转换为对象并将其发送到API

---

请帮助我验证excel文件

您可以直接将HTML元素设置为仅接受csv：

---

您可以直接将HTML元素设置为仅接受csv：

列表项

var reader=newfilereader（）；
reader.onload=（e）=>{
设csvData=reader.result；
让csvRecordsArray=（csvData.trim（）.split（/\r\n |\n/）；
let header=csvRecordsArray[0]。拆分（“，”；
//对于（var j=0；j列表项


var reader=newfilereader（）；
reader.onload=（e）=>{
设csvData=reader.result；
让csvRecordsArray=（csvData.trim（）.split（/\r\n |\n/）；
let header=csvRecordsArray[0]。拆分（“，”；
//for（var j=0；j“无法”不是错误消息或问题陈述。代码中到底发生了什么（或没有发生），“无法”不是错误消息或问题陈述。到底发生了什么（或没有发生）在您的代码中？OP已经使用了accept属性，并且没有指定.csv作为要求。这将不会为我提供验证弹出窗口。OP已经使用accept属性，并且没有指定.csv作为要求。这将不会为我提供验证弹出窗口。如果任何列或标题和数据不匹配，它将验证点csv文件h显示错误消息it validate dot csv文件如果任何列或标题与数据不匹配，则显示错误消息