[JS] Excel 데이터 가져오기

// 아래의 코드는 내가 제작했던 프로젝트의 코드의 일부분이므로 사용 시, 상황에 맞게 조금 수정해서 사용하는 것을 추천한다.(어려운 코드는 없으니 충분히 이해 가능)
// Excel Upload 버튼을 클릭하여 엑셀 파일을 첨부하고, 첨부하는 즉시 데이터를 json으로 추출한다.
// 추출한 json data를 이용하여 양식을 특정 위치에 추가한다.

<?
$num = 0;
foreach ($brandt as $bt){
    $num2 = 0;
    ?>
    <div class="d-table">
        <div class="table-cell">
            <label for="branch_excel<?=$num?>" class="mb-0">
                <div type="button" class="ml-2 btn btn-sm btn-excel-upload">Excel Upload</div>
            </label>
            <input type="file" name="branch_excel[]" id="branch_excel<?=$num?>" class="branch_excel d-none">
        </div>
    </div>
    <div class="ele_branch">
        <input type="hidden" id="cnt_branch<?=$num?>" value="<?= $cnt_branch_temp ?>" placeholder="cnt_branch">
        <table id="tb-branch<?=$num?>" cellpadding="0" cellspacing="0" class="wd-100 tb-branch">
            <tr>
                <th style="width: 160px;">지점명</th>
                <th>방 번호</th>
                <th style="width: 60px;"></th>
            </tr>
            <? if(count($brt_list)>0){ ?>
                <?
                foreach ($brt_list as $brt){
                    ?>
                    <tr class="tr_ele_branch">
                        <td>
                            <input type="hidden" name="branch_idx[<?=$num?>][<?=$num2?>]" id="branch_idx<?=$num?><?=$num2?>" value="<?=$brt['idx']?>">
                            <input type="text" name="branch_name[<?=$num?>][<?=$num2?>]" id="branch_name<?=$num?><?=$num2?>" class="form-control form-control-sm" value="<?=$brt['branch_name']?>" maxlength="100">
                        </td>
                        <td><input type="text" name="room_num[<?=$num?>][<?=$num2?>]" id="room_num<?=$num?><?=$num2?>" class="form-control form-control-sm" value="<?=$brt['branch_name']?>" placeholder="','를 이용하여 방 번호 리스트를 작성할 수 있습니다."></td>
                        <td>
                            <div class="text-center">
                                <span class="mdi mdi-minus-circle cursor_pointer" id="btn-del-branch<?=$num?><?=$num2?>" onclick="del_branch(this)" style="font-size: 30px; color: red;"></span>
                            </div>
                        </td>
                    </tr>
                    <?
                    $num2++;
                }
                ?>
            <? }else{ ?>
                <tr class="tr_ele_branch">
                    <td>
                        <input type="hidden" name="branch_idx[<?=$num?>][0]" id="branch_idx<?=$num?>0" value="">
                        <input type="text" name="branch_name[<?=$num?>][0]" id="branch_name<?=$num?>0" class="form-control form-control-sm" maxlength="100">
                    </td>
                    <td><input type="text" name="room_num[<?=$num?>][0]" id="room_num<?=$num?>0" class="form-control form-control-sm" placeholder="','를 이용하여 방 번호 리스트를 작성할 수 있습니다."></td>
                    <td>
                        <div class="text-center">
                            <span class="mdi mdi-minus-circle cursor_pointer" id="btn-del-branch<?=$num?>0" onclick="del_branch(this)" style="font-size: 30px; color: red;"></span>
                        </div>
                    </td>
                </tr>
            <? } ?>
        </table>
    </div>
    <?
    $num++;
}
?>

<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script>
$(".branch_excel").on("input", function (){
    const strid = $(this).attr("id");
    const stridnum = strid.replaceAll("branch_excel","");
    const num1 = parseInt(stridnum);

    const cnt_branch = $("#cnt_branch"+num1).val();
    let num2 = parseInt(cnt_branch)+1;

    const fileInput = document.getElementById("branch_excel"+num1);
    let reader = new FileReader();

    reader.onload = function(e) {
        let data = new Uint8Array(e.target.result);
        let workbook = XLSX.read(data, { type: "array" });

        // Process the Excel data
        let worksheet = workbook.Sheets[workbook.SheetNames[0]];
        let jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

        // Process jsonData as per your requirements
        console.log(jsonData.length);
        if(jsonData.length>1){
            // 항목명 행 외 다른 행들의 값이 있다면
            for(let a=1; a<jsonData.length; a++){
                const txt1 = jsonData[a][0];
                const txt2 = jsonData[a][1];

                let txthtml = '';

                txthtml += '<tr class="tr_ele_branch">';
                txthtml += '<td>';
                txthtml += '<input type="hidden" name="branch_idx['+num1.toString()+']['+num2+']" id="branch_idx'+num1.toString()+num2+'" value="">';
                txthtml += '<input type="text" name="branch_name['+num1.toString()+']['+num2+']" id="branch_name'+num1.toString()+num2+'" class="form-control form-control-sm" value="'+txt1+'" maxlength="100">';
                txthtml += '</td>';
                txthtml += '<td><input type="text" name="room_num['+num1.toString()+']['+num2+']" id="room_num'+num1.toString()+num2+'" class="form-control form-control-sm" value="'+txt2+'" placeholder="\',\'를 이용하여 방 번호 리스트를 작성할 수 있습니다."></td>';
                txthtml += '<td>';
                txthtml += '<div class="text-center">';
                txthtml += '<span class="mdi mdi-minus-circle cursor_pointer" id="btn-del-branch'+num1.toString()+num2+'" onclick="del_branch(this)" style="font-size: 30px; color: red;"></span>';
                txthtml += '</div>';
                txthtml += '</td>';
                txthtml += '</tr>';

                $("#tb-branch"+num1.toString()).append(txthtml);
                $("#cnt_branch"+num1).val(num2);

                num2++;
            }
        }
    };

    reader.readAsArrayBuffer(fileInput.files[0]);
})
</script>