node.js - 如何在reactjs中导入csv文件并在屏幕上显示数据？

Question

我对 React 还很陌生，我希望有人能帮助我如何在 React 中导入 csv 文件并在界面上显示数据(csv 文件)？

谢谢。

Answer 1

所以总的来说 html5 file api是一个简单地做到这一点的好方法。我已经使用过它几次并且跨浏览器有良好的支持。在 React 中，您可以执行类似的操作(未经测试的代码，仅供引用)。

class CSVFileUploader extends React.Component {
    handleFiles = (files) => {
        // Check for the various File API support.
        if (window.FileReader) {
            // FileReader are supported.
            this.getAsText(files[0]);
        }
    }

    getAsText(fileToRead) {
        var reader = new FileReader();
        // Read file into memory as UTF-8      
        reader.readAsText(fileToRead);
        // Handle errors load
        reader.onload = this.fileReadingFinished;
        reader.onerror = this.errorHandler;
    }

    processData(csv) {
        var allTextLines = csv.split(/\r\n|\n/);
        var lines = allTextLines.map(data => data.split(';'))

        console.log(lines)
    }

    fileReadingFinished(event) {
        var csv = event.target.result;
        processData(csv);
    }

    errorHandler(event) {
        if (event.target.error.name === "NotReadableError") {
            alert("Cannot read file!");
        }
    }

    render() {
        return(
            <input 
                type="file" 
                onchange={ this.handleFiles }
                accept=".csv" 
            />
        )
    }
}

神奇的事情发生在 getAsText 函数中，我们初始化一个 FileReader 实例，并将用户上传的文件传递给它。

读取文件的结果在processData函数中输出。大部分代码取自/修改自 here