前端解析excel和csv文件

953 阅读1分钟

国庆假期前的最后一个需求:解析excel和csv文件并把数据显示在页面中,后端没时间做,让前端自己解析,那就干了兄弟们,都是科技与狠活啊哥们。

npm install read-excel-file
<input type="file" id="excel" onChange={this.excelChange} />
// React类组件中使用
import readXlsxFile from 'read-excel-file'

excelChange = () => {
        const that = this
        const file = document.getElementById('excel')
        if(file.files[0].type === "text/csv") { // csv文件使用纯js就能解析
            const fileReader = new FileReader();
            fileReader.readAsText(file.files[0]);
            fileReader.onload = function() {
                console.log(this.result) // 打印解析结果
                that.setState({}) // 写这个目的就是想说这个函数里的this并不是类
            }
        } else { // excel使用read-excel-file插件解析
            readXlsxFile(file.files[0]).then((rows) => {
                console.log(rows) // 打印解析结果
            })
        }
    }