Javascript 如何在React中上载和读取.csv、.xls和.xlsx

我正在尝试上载一个格式为

.csv/.xls/.xlsx

的文件，然后读取文件内容

例如，下面的文件

将输出：

name,age,key  
Mark,25,1  
Jones,30,2

这是我迄今为止使用和实现的，但它仅适用于

.csv

文件：

  onFileUpload(file) {
    var decodedData = base64.decode(file.base64);
  }

  <ReactFileReader fileTypes={[".csv",".xls", ".xlsx"]} base64={true} multipleFiles={false} handleFiles={this.onFileUpload}>
    <button className='btn'>Upload</button>
  </ReactFileReader>

onFileUpload（文件）{
var decodedData=base64.decode（文件.base64）；
}
上传

---

是否有任何方法可以使用与

.csv

文件相同的方法获取

.xls

和

.xlsx

文件的内容？或者另一个模块也可以这样做…

我添加了下面的代码

选择Excel文件

                        <ReactFileReader handleFiles={this.handleFiles} fileTypes={[".xls", ".xlsx", ".csv"]} base64={true}>
                            <button className='btn btn-warning btn-sm'>Select File</button>
                            { this.state.isFileLoaded ? <label>File Loaded</label> 
                            : <label>File Not Selected</label>  }
                        </ReactFileReader>

                        <span id="errprojectLogoUrl" className="text text-danger"></span>

---

我非常确定.xls和.xlsx文件是二进制文件，您将无法轻松解析和呈现它们。在我看来，最好的方法是加入一些后端，有很多lib可以这样做，它们可以返回一个合适的json来解释前端

    const currentMsgModal = {
        ...this.state.messageModal
    };

    currentMsgModal["isModalHidden"] = true;

    let jsonBase64 = files.base64;
    let index = jsonBase64.indexOf(',');
    let encodedString = jsonBase64.substr(index + 1);
            
    let fileName = files.fileList[0].name;
    let formatString = /[^.]*$/.exec(fileName)[0];

    let isCSVFile = formatString.includes('csv');
    let isXLSFile = formatString.includes('xls');
    let isXLSXFile = formatString.includes('xlsx');
    

    if (isCSVFile || isXLSFile || isXLSXFile)
    {
        this.setState({
            inputFileBaseString: encodedString,
            isFileLoaded: true,
            messageModal: currentMsgModal
        });
    }
    else
    {
        currentMsgModal["messageType"] = "Error"
        currentMsgModal["messageDescription"] = "File Type Not Supported"
        currentMsgModal["isModalHidden"] = false;
        
        this.setState({
            messageModal: currentMsgModal
        });
    }
    this.hideLoading();
  }