728x90
반응형
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; /* 세로 스크롤을 추가합니다. */
}
결과
728x90
반응형
'백수 > 자바스크립트' 카테고리의 다른 글
자바스크립트 행 추가 (0) | 2023.11.11 |
---|---|
자바스크립트 테이블 형식 데이터 전송 (0) | 2023.10.23 |