스크립트로 엑셀 업로드가 가능하여 테스트해봄.
case 1) 엑셀을 업로드하여 화면에 단순 표시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엑셀 업로드 테스트</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function upload(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function() {
var fdata = reader.result;
var read_buffer = XLSX.read(fdata, {type : 'binary'});
var xlsArea = document.getElementById("xlsArea");
var tableStr = "<table style='border:1px solid;'>";
read_buffer.SheetNames.forEach(function(sheetName) {
var rowdata = XLSX.utils.sheet_to_json(read_buffer.Sheets[sheetName]);
//console.log("[" + sheetName + "] 시트 데이터 : " + JSON.stringify(rowdata));
$.each(rowdata, function(i, coldata){
//console.log(rowdata);
//엑셀 Header 세팅
if(i == 0){
tableStr += "<tr>";
$.each(coldata, function(colHeader, colText){
tableStr += "<th style='color:red;width:500px;border:1px solid;'>" + colHeader + "<th>";
});
tableStr += "</tr>";
}
//엑셀 내용 세팅
tableStr += "<tr>";
$.each(coldata, function(colHeader, colText){
tableStr += "<td style='border:1px solid;'>" + colText + "<td>";
});
tableStr += "</tr>";
});
});
tableStr += "</table>";
xlsArea.innerHTML = tableStr;
//console.log(tableStr);
};
reader.readAsBinaryString(input.files[0]);
}
</script>
</head>
<body>
<input type="file" id="id_file_upload" onchange="upload(event)"/>
<br /><br />
<div id="xlsArea"></div>
</body>
</html>
case 2) 엑셀을 업로드하여 화면에서 수정 후 서버에 반영
(원래 엑셀을 서버로 업로드하는 부분과 export 하는 부분을 구현하려 하였으나 화면에 보여줄때 input 등으로 표시하고 수정하여 서버에 반영하면 필요없을 듯하여 수정)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엑셀 업로드 테스트</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function upload(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function() {
var fdata = reader.result;
var read_buffer = XLSX.read(fdata, {type : 'binary'});
var $xlsArea = $("#xlsArea");
var $table = $("<table>", {style:"border:1px solid;"});
read_buffer.SheetNames.forEach(function(sheetName) {
var rowdata = XLSX.utils.sheet_to_json(read_buffer.Sheets[sheetName]);
//console.log("[" + sheetName + "] 시트 데이터 : " + JSON.stringify(rowdata));
$.each(rowdata, function(i, coldata){
//console.log(rowdata);
//엑셀 Header 세팅
if(i == 0){
var $headerTr = $("<tr>");
$.each(coldata, function(colHeader, colText){
var $th = $("<th>", {style : 'color:red;width:500px;border:1px solid;', text : colHeader});
$headerTr.append($th);
});
$table.append($headerTr);
}
//엑셀 내용 세팅
$tr = $("<tr>");
$.each(coldata, function(colHeader, colText){
var $td = $("<td>", {style : 'border:1px solid;'});
var $ipt = $("<input>", {type : "input", value : colText, name : colHeader, style : "width:97%;"});
$td.append($ipt);
$tr.append($td);
});
$table.append($tr);
});
});
$xlsArea.append($table);
//console.log(tableStr);
};
reader.readAsBinaryString(input.files[0]);
}
</script>
</head>
<body>
<input type="file" id="id_file_upload" onchange="upload(event)"/>
<br /><br />
<div id="xlsArea"></div>
</body>
</html>
반응형
'개발 > Javascript' 카테고리의 다른 글
| 스크립트 엑셀 Export (0) | 2022.05.20 |
|---|---|
| datepicker 관련 스크립트 제어 (0) | 2022.05.19 |
| 소수점 입력 제어 스크립트 및 정수 입력 제어 스크립트 (0) | 2021.11.24 |
| input or select 등 객체의 class를 이용한 필수 입력체크 (0) | 2021.11.24 |
| jquery validator 사용시 전화번호 형식 및 날짜 형식 추가 (0) | 2021.11.24 |