在Reactjs中阅读excel文件

pqwbnv8z  于 2022-12-19  发布在  React
关注(0)|答案(4)|浏览(238)

我正在尝试和敲打我的头已经,而试图在Reactjs中读取excel文件。
我已经尝试了多个库,如Sheetjsexcel-parserexceljs等(如8-9)库。
我在每个图书馆都遇到了奇怪和不同的错误。
例如,我正在使用excel-parser并得到以下错误

Module not found: 'child_process'

这是因为它是一个节点模块,不能在浏览器中工作。
有人知道一些好的和容易的库,可以与reactjs在浏览器

x4shl7ld

x4shl7ld1#

我已使用Sheetjs的npm版本xlsx成功读取excel文件。
代码如下:

import * as XLSX from 'xlsx';
//f = file
var name = f.name;
const reader = new FileReader();
reader.onload = (evt) => { // evt = on_file_select event
    /* Parse data */
    const bstr = evt.target.result;
    const wb = XLSX.read(bstr, {type:'binary'});
    /* Get first worksheet */
    const wsname = wb.SheetNames[0];
    const ws = wb.Sheets[wsname];
    /* Convert array of arrays */
    const data = XLSX.utils.sheet_to_csv(ws, {header:1});
    /* Update state */
    console.log("Data>>>"+data);
};
reader.readAsBinaryString(f);
7uzetpgm

7uzetpgm2#

诺曼·阿里谢谢。
我用了这个代码

const handleUpload = (e) => {
    e.preventDefault();

    var files = e.target.files, f = files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
        var data = e.target.result;
        let readedData = XLSX.read(data, {type: 'binary'});
        const wsname = readedData.SheetNames[0];
        const ws = readedData.Sheets[wsname];

        /* Convert array to json*/
        const dataParse = XLSX.utils.sheet_to_json(ws, {header:1});
        setFileUploaded(dataParse);
    };
    reader.readAsBinaryString(f)
}
e7arh2l6

e7arh2l63#

我发现xlsx工作得很好。xlsx Package

fhg3lkii

fhg3lkii4#

找到here最简单的方法之一:这种方法也适用于阅读.xlsx、.txt或其他格式。
片段:

import * as XLSX from 'xlsx';
...

<input
type="file"
onInput={(e) => this._handleFile(e)}
/>
...

private _handleFile = async (e: any) => {
    console.log('reading input file:');
    const file = e.target.files[0];
    const data = await file.arrayBuffer();
    const workbook = XLSX.read(data);
    const worksheet = workbook.Sheets[workbook.SheetNames[0]];
    const jsonData = XLSX.utils.sheet_to_json(worksheet, {
        header: 1,
        defval: "",
    });

    //console.log(e.target.files[0]);
    //console.log(workbook);
    console.log(jsonData);
}

相关问题