자바스크립트로 엑셀 파일을 읽을 수 있어?

어,! 그럼 당연히 읽을 수 있지! 걱정 마 ㅎㅎ

자바스크립트로 엑셀 파일을 읽는 건 여러 라이브러리를 사용해서 충분히 가능해. 가장 대표적인 방법들은 이거야:

• SheetJS (js-xlsx): 이게 제일 많이 쓰이는 방법 중 하나인데, 엑셀 파일을 파싱해서 데이터를 자바스크립트 객체나 배열로 쉽게 가져올 수 있어. 웹페이지에서 파일 선택창을 만들어서 사용자가 직접 엑셀 파일을 업로드하면, 그 파일을 읽어 들여서 처리하는 방식이 주로 사용돼  .
• ExcelJS: 이 라이브러리도 엑셀 파일을 읽고 쓰는 데 유용해. 좀 더 고급 기능을 제공하기도 하지.
• SpreadJS 같은 스프레드시트 라이브러리: 이건 단순히 읽는 것뿐만 아니라 웹 환경에서 엑셀처럼 스프레드시트를 다루는 기능을 제공하는 상용 라이브러리인데, 이걸 활용해서 엑셀 파일을 불러오고 데이터를 조작할 수도 있어  .

보통 <input type="file"> 같은 걸로 파일을 선택하게 한 다음에, FileReader API를 써서 파일을 읽어 들이고, 그 다음에 위에 말한 라이브러리들을 이용해서 엑셀 데이터를 추출하는 방식으로 진행하면 돼. 만약 URL에 있는 엑셀 파일이라면 fetch 같은 걸로 가져와서 Blob 형태로 처리한 다음에 읽을 수도 있고! 

 

자바스크립트로 엑셀을 읽는데 https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js 이거 사용하거든.. 근데 셀값이 없는거는 읽지는 않네.. 반값까지 읽게 하려면

 

엑셀 셀이 비어있는 값도 읽어오게 하고 싶구나! SheetJS 라이브러리 사용할 때 빈 셀을 처리하는 방법을 알려줄게.

현재 코드에서는 빈 셀이 있을 경우 해당 데이터를 건너뛰고 있어. Object.values()로 변환할 때 빈 셀이 포함되지 않는 문제인데, 이걸 해결하기 위해서는 데이터를 처리하는 방식을 약간 수정해야 해.

이렇게 수정해보는 건 어때?

javascript

// 엑셀 파일 읽기
function handleFile(e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    
    reader.onload = function(e) {
        var data = new Uint8Array(e.target.result);
        var workbook = XLSX.read(data, {type: 'array'});
        
        // 첫 번째 시트 가져오기
        var firstSheet = workbook.Sheets[workbook.SheetNames[0]];
        
        // 시트의 범위 정보 가져오기
        var range = XLSX.utils.decode_range(firstSheet['!ref']);
        var maxCol = range.e.c; // 최대 열 수
        
        // header: 1 옵션은 배열 형태로 변환해줌 (빈 셀은 undefined로 표시됨)
        var rows = XLSX.utils.sheet_to_json(firstSheet, {header: 1, defval: ''});
        
        var table = '<table>';
        // 헤더 행 처리 (있다면)
        if(rows.length > 0) {
            table += '<tr>';
            for(var i=0; i<=maxCol; i++) {
                table += '<th>' + (rows[0][i] || '') + '</th>';
            }
            table += '</tr>';
        }
        
        // 데이터 행 처리 (2번째 행부터)
        for(var r=1; r<rows.length; r++) {
            table += '<tr>';
            for(var c=0; c<=maxCol; c++) {
                // undefined면 빈 문자열로 처리
                table += '<td>' + (rows[r][c] || '') + '</td>';
            }
            table += '</tr>';
        }
        table += '</table>';
        
        document.getElementById('output').innerHTML = table;
    };
    reader.readAsArrayBuffer(file);
}

핵심 변경사항은:

1. sheet_to_json 함수를 사용할 때 {header: 1, defval: ''} 옵션을 추가했어.
   • header: 1은 배열 형태로 변환
   • defval: ''은 빈 셀을 빈 문자열로 설정 (undefined 대신)
2. 열의 범위를 명시적으로 계산해서 모든 열을 순회하도록 했어.

이렇게 하면 빈 셀도 포함해서 모든 데이터를 표시할 수 있을 거야

 

이제 빈값도 읽어는 왓는데 날짜 데이터가 숫자로 나와

 

아, 날짜 데이터가 숫자로 나오는 문제가 생겼구나! SheetJS를 사용하면 엑셀의 날짜 형식이 JavaScript에서 숫자로 변환되는 경우가 있어. 엑셀에서는 날짜를 내부적으로 1900년 1월 1일부터의 일수로 저장하거든.

이 문제를 해결하는 방법을 알려줄게:

javascript

// 엑셀 파일 읽기 함수 수정
function handleFile(e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    
    reader.onload = function(e) {
        var data = new Uint8Array(e.target.result);
        // 여기서 날짜 감지 옵션 추가
        var workbook = XLSX.read(data, {type: 'array', cellDates: true, dateNF: 'yyyy-mm-dd'});
        
        // 첫 번째 시트 가져오기
        var firstSheet = workbook.Sheets[workbook.SheetNames[0]];
        
        // 시트의 범위 정보 가져오기
        var range = XLSX.utils.decode_range(firstSheet['!ref']);
        
        // 날짜 형식으로 변환하는 함수
        function formatDate(dateNum) {
            // 엑셀 날짜 숫자인지 확인
            if(typeof dateNum === 'number' && dateNum > 25569) {
                // 엑셀 날짜 숫자를 JavaScript Date 객체로 변환
                // 엑셀은 1900년 1월 1일부터 시작, JS는 1970년 1월 1일부터 시작
                // 25569는 1970년 1월 1일의 엑셀 날짜 값
                var date = new Date((dateNum - 25569) * 86400 * 1000);
                return date.toISOString().split('T')[0]; // YYYY-MM-DD 형식
            }
            return dateNum; // 날짜가 아니면 원래 값 반환
        }
        
        // header: 1 옵션은 배열 형태로 변환
        var rows = XLSX.utils.sheet_to_json(firstSheet, {header: 1, defval: '', raw: false});
        
        var table = '<table>';
        // 테이블 생성 (날짜 변환 적용)
        for(var r=0; r<rows.length; r++) {
            table += '<tr>';
            for(var c=0; c<=range.e.c; c++) {
                var cellValue = rows[r][c] || '';
                // 숫자 형태의 날짜 데이터 변환
                if(typeof cellValue === 'number' && cellValue > 25569) {
                    cellValue = formatDate(cellValue);
                }
                
                if(r === 0) {
                    table += '<th>' + cellValue + '</th>';
                } else {
                    table += '<td>' + cellValue + '</td>';
                }
            }
            table += '</tr>';
        }
        table += '</table>';
        
        document.getElementById('output').innerHTML = table;
    };
    reader.readAsArrayBuffer(file);
}

핵심 변경사항은:

1. XLSX.read() 함수에 cellDates: true 옵션을 추가해서 날짜를 자동으로 감지하도록 했어.
2. 날짜 형식이 숫자로 나오는 경우를 대비해 formatDate() 함수를 추가했어. 이 함수는 엑셀 날짜 숫자를 JavaScript Date 객체로 변환해주지.
3. sheet_to_json 함수에 raw: false 옵션을 추가해서 날짜와 숫자를 문자열로 변환하도록 했어.

혹시 위 방법으로도 해결이 안 된다면 다른 접근법도 있으니까 알려줘! 특히 어떤 형태로 날짜가 표시되는지 예시를 주면 더 정확한 해결책을 찾을 수 있을 거야.