Reactjs에서 Excel 파일을 읽는 중

Reactjs에서 Excel 파일을 읽는 중

나는 리액트js에서 엑셀 파일을 읽으려고 시도하는 동안 이미 머리를 부딪치고 있습니다.

저는 Sheetjs, excel-parser, exceljs 등과 같은 여러 라이브러리를 시도해 보았습니다.

나는 도서관마다 이상하고 다른 오류가 발생하고 있습니다.

예를 들어 Excel-parser를 사용하고 있는데 다음 오류가 발생합니다.

Module not found: 'child_process'

노드 모듈이기 때문에 브라우저에서 작동하지 않습니다.

브라우저에서 reactjs로 작동할 수 있는 좋고 쉬운 라이브러리 아는 사람?

Sheetjs의 npm version xlsx를 사용하여 엑셀 파일을 성공적으로 읽었습니다.

코드는 다음과 같습니다.

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);

알리가 아닙니다!감사해요.
이 코드를 사용했습니다.

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)
}

저는 xlsx가 꽤 잘 작동한다고 생각합니다.xlsx 패키지

여기서 찾을 수 있는 가장 간단한 방법 중 하나:이 접근 방식은 .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);
}

예를 들어, reactjs에 exceljs를 사용할 수 있습니다.

import React from 'react';
import Excel from 'exceljs';

const Index = () => {
    const handleChange = (e) => {
        const file = e.target.files[0];
        const wb = new Excel.Workbook();
        const reader = new FileReader();

        reader.readAsArrayBuffer(file);
        reader.onload = () => {
            const buffer = reader.result;
            wb.xlsx.load(buffer).then((workbook) => {
                console.log(workbook, 'workbook instance');
                workbook.eachSheet((sheet, id) => {
                    sheet.eachRow((row, rowIndex) => {
                        console.log(row.values, rowIndex);
                    });
                });
            });
        };
    };

    return (
        <div>
            <div>Upload Excel File</div>
            <input type='file' onChange={(e) => handleChange(e)} />
        </div>
    );
};

Index.propTypes = {};
Index.defaultProps = {};

export default Index;

언급URL : https://stackoverflow.com/questions/46909260/reading-excel-file-in-reactjs