스크립트로 엑셀 업로드가 가능하여 테스트해보고 스크립트로 Export도 가능할듯하여 테스트.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엑셀 Export 테스트</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 src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.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 id='tableData' 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]);
}
var excelHandler = {
getExcelFileName : function() {
return 'table-test.xlsx';
},
getSheetName : function() {
return 'Table Test Sheet';
},
getExcelData : function() {
return document.getElementById('tableData');
},
getWorksheet : function() {
return XLSX.utils.table_to_sheet(this.getExcelData());
}
};
function s2ab(s) {
var buf = new ArrayBuffer(s.length); //convert s to arrayBuffer
var view = new Uint8Array(buf); //create uint8array as viewer
for (var i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF; //convert to octet
return buf;
}
function fnExport(){
// step 1. workbook 생성
var wb = XLSX.utils.book_new();
// step 2. 시트 만들기
var newWorksheet = excelHandler.getWorksheet();
// step 3. workbook에 새로만든 워크시트에 이름을 주고 붙인다.
XLSX.utils.book_append_sheet(wb, newWorksheet, excelHandler.getSheetName());
// step 4. 엑셀 파일 만들기
var wbout = XLSX.write(wb, {bookType:'xlsx', type: 'binary'});
// step 5. 엑셀 파일 내보내기
saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), excelHandler.getExcelFileName());
}
</script>
</head>
<body>
<div style="float: left;">
<input type="file" id="id_file_upload" onchange="upload(event)"/>
</div>
<div style="float: right;">
<button type="button" id="btnExport" onclick="fnExport();">엑셀 내보내기</button>
</div>
<br /><br />
<div id="xlsArea"></div>
</body>반응형
'개발 > Javascript' 카테고리의 다른 글
| jquery를 이용한 특정영역에 input Max값 Min값 구하기 (0) | 2022.07.05 |
|---|---|
| datepicker 관련 스크립트 제어 (0) | 2022.05.19 |
| 스크립트 엑셀 업로드 (0) | 2022.05.10 |
| 소수점 입력 제어 스크립트 및 정수 입력 제어 스크립트 (0) | 2021.11.24 |
| input or select 등 객체의 class를 이용한 필수 입력체크 (0) | 2021.11.24 |