Excel 파싱 관련

요약

React-papaparse는 csv만 가능해서 xlsx → csv convert 과정이 추가로 필요하나,

xlsx는 xlsx파일, csv 파일 둘 다 import 가능하며, json 변환도 쉽다.

(단, xlsx 라이브러리로 xlsx 파일이 아닌 csv 파일을 파싱할 경우 특수문자가 나오는 문제가 있음.)

---

 

Papaparse vs React-papaparse

1. papaparse: 브라우저, Node.js 모두에서 사용할 수 있으며, 큰 파일, 문자열, 스트림을 CSV로 변환하거나 CSV를 JSON으로 변환하는 기능을 제공

import Papa from 'papaparse';

Papa.parse(file, config);
    
const csv = Papa.unparse(data[, config]);

1. react-papaparse: papaparse를 기반으로 하지만 React를 위해 만들어진 라이브러리. 따라서 React 컴포넌트로 CSV 파일을 읽고 쓰는 작업을 쉽게 할 수 있다. 이 라이브러리는 React Hooks를 제공하여 CSV 데이터를 쉽게 가져오고 사용할 수 있게 한다.

export default function CSVReader() {
    const {CSVReader} = useCSVReader();
    // ...
    
    return (
        <CSVReader onUploadAccepted={(results: any) => {
            console.log('---------------------------');
            console.log(results);
            console.log('---------------------------');
            setZoneHover(false);
        }}
                   onDragOver={(event: DragEvent) => {
                       event.preventDefault();
                       setZoneHover(true);
                   }}
                   onDragLeave={(event: DragEvent) => {
                       event.preventDefault();
                       setZoneHover(false);
                   }}
        >
            {({
                  getRootProps,
                  acceptedFile,
                  ProgressBar,
                  getRemoveFileProps,
                  Remove,
              }: any) => (
                <>
                    <div {...getRootProps()} style={Object.assign({}, styles.zone, zoneHover && styles.zoneHover)}>
                        {acceptedFile ? (
                            <>
                                <div style={styles.file}>
                                    <div style={styles.info}>
                        <span style={styles.size}>
                            {formatFileSize(acceptedFile.size)}
                        </span>
                                        <span style={styles.name}>{acceptedFile.name}</span>
                                    </div>
                                    <div style={styles.progressBar}>
                                        <ProgressBar/>
                                    </div>
                                    <div {...getRemoveFileProps()} style={styles.remove}
                                         onMouseOver={(event: Event) => {
                                             event.preventDefault();
                                             setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                                         }}
                                         onMouseOut={(event: Event) => {
                                             event.preventDefault();
                                             setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                                         }}
                                    >
                                        <Remove color={removeHoverColor}/>
                                    </div>
                                </div>
                            </>
                        ) : (
                            'Drop CSV file here or click to upload'
                        )}
                    </div>
                </>
            )}
        </CSVReader>
    );
}

Github (Star 348 / Fork 60)

https://github.com/Bunlong/react-papaparse

특징

• csv 파일만 가능 (추후 csv로 export 가능)
  • xlsx 파일 첨부하는 경우가 많다면 추가적으로 csv → xlsx 변환 후 진행
• Drag & Drop 기능 O
• 데이터 쉽게 Read
• UI 원하는대로 변경 가능
• 가장 최근 Updated : 6 months ago

---

⭐️ Xlsx (sheetjs) → 컴포넌트가 아닌 유틸 함수, Xlsx → Json 데이터로 변환

 

→ 아래에 나타나는게 배열 안의 json 객체들입니다.

파싱 과정

const convertXlsxToJson = (file: File) => {
    const reader = new FileReader();
    reader.onload = (e) => {
        if (e.target !== null) {
            const data = new Uint8Array(e.target.result as ArrayBuffer);
            const workbook = XLSX.read(data, {type: 'array'});
            const sheetName = workbook.SheetNames[0];
            const jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
            setJsonFiles(prevJsonFiles => [...prevJsonFiles, jsonData]);
        }
    };
    reader.readAsArrayBuffer(file);
}

Github & Document

https://github.com/SheetJS/sheetjs

https://sheetjs.com/demo/

특징

• 컴포넌트가 아닌 유틸 함수

• 가장 최근 Updated : 2 years ago
• 파일 Drag & Drop 라이브러리인 React-dropzone과 xlsx 라이브러리로 xlsx 파싱 → JSON 변환을 활용하면 될 것 같습니다.