SheetJS : JS·Î ¿¢¼¿ ÆÄÀÏ Àб⠿¹Á¦
±×µ¿¾È ¿¢¼¿ ÆÄÀÏÀº ¼¹ö·Î ¾÷·Îµå¸¦ ÇÏ°í ¹é¿£µå¿¡¼ ÀÐ¾î¼ Ã³¸®Çߴµ¥ ¾ó¸¶ Àü¿¡ javascript·Î ó¸®ÇÏ´Â °ÍÀ» º¸½À´Ï´Ù.
¿ì¿Í~~~
ÆÄÀÏ ¾÷·Îµå 󸮴 Ç×»ó ±ÍÂúÀº ÀÏ Áß Çϳª¿´´Âµ¥ ÀÌÁ¦ ½±°Ô ó¸®ÇÒ ¼ö ÀÖ½À´Ï´Ù.
°£´ÜÇÑ ¶óÀ̺귯¸® Ãß°¡ ¸¸À¸·Î ³¡~~~
¿¢¼¿ ÆÄÀÏÀ» ÀÐ°í ¾²´Â°Ô ¼¹ö¿¡¼ ó¸®ÇÒ ÇÊ¿ä°¡ ÀüÇô ¾ø¾ú½À´Ï´Ù.
¸¹Àº »ç¶÷µéÀÌ ¾Ë°í ÀÖ¾ú´ø °Å °°Àºµ¥ Àü ÀÌÁ¦¾ß ¾Ë°ÔµÇ¾î ºÎ²ô·´½À´Ï´Ù.
SheetJS Github : ¹®¼ ¹× ¼Ò½º, ´Ù¿î·Îµå
- https://github.com/SheetJS/js-xlsx
Âü°íÇÒ CDN ÁÖ¼Ò
- https://cdnjs.com/libraries/xlsx
¿¢¼¿ ÆÄÀÏ Àб⠰£´Ü ¿¹Á¦
1. HTML ÀÛ¾÷
1-1. ¶óÀ̺귯¸® Ãß°¡
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script>
1-2. ¹öÆ° À̺¥Æ® Ãß°¡
<input type="file" id="excelFile" onchange="excelExport(event)"/>
2. SCRIPT
<script>
function excelExport(event){
var input = event.target;
var reader = new FileReader();
reader.onload = function(){
var fileData = reader.result;
var wb = XLSX.read(fileData, {type : 'binary'});
wb.SheetNames.forEach(function(sheetName){
var rowObj =XLSX.utils.sheet_to_json(wb.Sheets[sheetName]);
console.log(JSON.stringify(rowObj));
})
};
reader.readAsBinaryString(input.files[0]);
}
</script>
3. °á°ú : console.log
[{"»óÇ°ÄÚµå":10001,"»óÇ°¸í":"»óÇ°1","°¡°Ý":10000,"ºÐ·ù":"ÆмÇ","»óÅÂ":"Y"},{"»óÇ°ÄÚµå":10002,"»óÇ°¸í":"»óÇ°2","°¡°Ý":20000,"ºÐ·ù":"ÀâÈ","»óÅÂ":"Y"},{"»óÇ°ÄÚµå":10003,"»óÇ°¸í":"»óÇ°3","°¡°Ý":30000,"ºÐ·ù":"°¡±¸","»óÅÂ":"Y"},{"»óÇ°ÄÚµå":10004,"»óÇ°¸í":"»óÇ°4","°¡°Ý":40000,"ºÐ·ù":"ÀÇ·ù","»óÅÂ":"Y"}]
³Ê¹« °£´ÜÇÏÁö ¾Ê³ª¿ä.
json ÇüÅ·Π°á°ú¸¦ ÀÐ¾î¼ ¼¹ö ÂÊ¿¡ RequestBody·Î ´øÁö°í ¼¹öÂÊ¿¡¼ Object¿¡ ¸ÅÇÎÇÏ¿© ó¸®ÇÑ´Ù¸é ¼Ò½º°¡ ´õ ¾øÀÌ ±ò²ûÇÒ°Å °°½À´Ï´Ù.
½Ç¹«¿¡¼ À§¿¡ ³ª¿Â ¼Ò½º Á¤µµ¸é ¹«¸®¾øÀÌ Àû¿ëÇÒ ¼ö ÀÖÀ» °Å °°½À´Ï´Ù.
¿¢¼¿ ÆÄÀÏ Ã¹¹ø° ½ÃÆ®¸¸ ÀÐÀ» °ÍÀÌ°í °æ¿ì¿¡ µû¶ó json, csv, html ÇüÅ°¡ ÇÊ¿äÇÑ °æ¿ì ¿¹Á¦¸¦ °£´ÜÇÏ°Ô ¸¸µé¾î º¸°Ú½À´Ï´Ù.
¼Ò½º
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js excel example 03</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script>
<script>
function excelExport(event){
excelExportCommon(event, handleExcelDataAll);
}
function excelExportCommon(event, callback){
var input = event.target;
var reader = new FileReader();
reader.onload = function(){
var fileData = reader.result;
var wb = XLSX.read(fileData, {type : 'binary'});
var sheetNameList = wb.SheetNames; // ½ÃÆ® À̸§ ¸ñ·Ï °¡Á®¿À±â
var firstSheetName = sheetNameList[0]; // ù¹ø° ½ÃÆ®¸í
var firstSheet = wb.Sheets[firstSheetName]; // ù¹ø° ½ÃÆ®
callback(firstSheet);
};
reader.readAsBinaryString(input.files[0]);
}
function handleExcelDataAll(sheet){
handleExcelDataHeader(sheet); // header Á¤º¸
handleExcelDataJson(sheet); // json ÇüÅÂ
handleExcelDataCsv(sheet); // csv ÇüÅÂ
handleExcelDataHtml(sheet); // html ÇüÅÂ
}
function handleExcelDataHeader(sheet){
var headers = get_header_row(sheet);
$("#displayHeaders").html(JSON.stringify(headers));
}
function handleExcelDataJson(sheet){
$("#displayExcelJson").html(JSON.stringify(XLSX.utils.sheet_to_json (sheet)));
}
function handleExcelDataCsv(sheet){
$("#displayExcelCsv").html(XLSX.utils.sheet_to_csv (sheet));
}
function handleExcelDataHtml(sheet){
$("#displayExcelHtml").html(XLSX.utils.sheet_to_html (sheet));
}
// Ãâó : https://github.com/SheetJS/js-xlsx/issues/214
function get_header_row(sheet) {
var headers = [];
var range = XLSX.utils.decode_range(sheet['!ref']);
var C, R = range.s.r; /* start in the first row */
/* walk every column in the range */
for(C = range.s.c; C <= range.e.c; ++C) {
var cell = sheet[XLSX.utils.encode_cell({c:C, r:R})] /* find the cell in the first row */
var hdr = "UNKNOWN " + C; // <-- replace with your desired default
if(cell && cell.t) hdr = XLSX.utils.format_cell(cell);
headers.push(hdr);
}
return headers;
}
</script>
</head>
<body>
ÆÄÀÏ ¼±Åà : <input type="file" id="excelFile" onchange="excelExport(event)"/>
<h1>Header Á¤º¸ º¸±â</h1>
<div id="displayHeaders"></div>
<h1>JSON ÇüÅ·Πº¸±â</h1>
<div id="displayExcelJson"></div>
<h1>CSV ÇüÅ·Πº¸±â</h1>
<div id="displayExcelCsv"></div>
<h1>HTML ÇüÅ·Πº¸±â</h1>
<div id="displayExcelHtml"></div>
</body>
</html>
°á°ú
ÀÌ¿Ü¿¡ »ó¼¼ÇÑ Á¤º¸´Â ÇØ´ç »çÀÌÆ®¿¡¼ ÇÊ¿äÇÑ Á¤º¸¸¦ ã¾Æ º¸½Ã´Â°Ô Á¦ÀÏ ÁÁÀ» °Å °°½À´Ï´Ù.
GITHUB
¿¢¼¿ ¾²±â ¿¹Á¦
2019/06/30 - [UI(Front-End)] - SheetJS : JS·Î ¿¢¼¿ ÆÄÀÏ ¾²±â ¿¹Á¦