html, 자바스크립트 엑셀 파일 읽기

HTML, 자바스크립트 코드로 엑셀 파일 읽기(CSS 부트스트랩 사용)

HTML

파일 선택 : <input type="file" id="excelFile" onchange="readExcel();"/>
    <div id="displayExcelTable" class="displayExcelTable" style="display:none">
         <div id="list" class="scrollDiv">
         </div>
    </div>

자바스크립트

function readExcel() {
  const input = event.target;
  const reader = new FileReader();
  const ulNode = document.getElementById("list");

  // 이전에 표시된 데이터 삭제
  ulNode.innerHTML = "";
  // 출력
  document.getElementById("displayExcelTable").style.display ='block';	

  reader.onload = function () {
    const data = reader.result;
    const workBook = XLSX.read(data, { type: 'binary' });

    workBook.SheetNames.forEach(function (sheetName) {
      const rows = XLSX.utils.sheet_to_json(workBook.Sheets[sheetName]);
      const headers = Object.keys(rows[0]);

      const table = generateTable(headers, rows);
      ulNode.insertAdjacentHTML("afterbegin", table);
    });
  };

  reader.readAsBinaryString(input.files[0]);
}

function generateTable(headers, rows) {
  let tableHTML = "<table id='scrolltable' name='scrolltable' class='table table-hover scrolltable'>";
  tableHTML += "<thead><tr>";

  headers.forEach((header) => {
    tableHTML += `<td name='${header}' id='${header}'>${header}</td>`;
  });

  tableHTML += "</tr></thead>";
  tableHTML += "<tbody>";

  rows.forEach((row) => {
    tableHTML += "<tr>";

    headers.forEach((header) => {
      tableHTML += `<td name='breakdown_${header}' id='breakdown_${header}'>${row[header]}</td>`;
    });

    tableHTML += "</tr>";
  });

  tableHTML += "</tbody>";
  tableHTML += "</table>";

  return tableHTML;
}

 

CSS : 부트스트랩(기본)

해당 코드는 세로 스크롤을 위한 추가

.displayExcelTable {
	height: 300px; /* 테이블 컨테이너의 고정 높이 */
	overflow-y: scroll; /* 세로 스크롤을 추가합니다. */
  }

결과