xlsx파일을 읽어서 웹에서 표출하는 방법은 Sheetjs라는 라이브러리를 사용하면 편리하게 구현 가능 하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="excel.min.js"></script>
</head>
<body class='container'>
<input type='file' id='file'/>
<div id='grid'></div>
</body>
</html>
<script>
function gridExcelToWeb(file, target){
var reader = new FileReader();
reader.onload = function (evt) {
if (evt.target.readyState == FileReader.DONE) {
var data = evt.target.result;
data = new Uint8Array(data);
var workbook = XLSX.read(data, { type: 'array' });
var sheetName = '';
workbook.SheetNames.forEach( function(data, idx){ //시트이름은 1개만 했다. 반복문을 돌리면 여러개를 그린다.
if(idx == 0){
sheetName = data;
}
});
var toHtml = XLSX.utils.sheet_to_html(workbook.Sheets[sheetName], { header: '' });
target.html(toHtml);
}
};
reader.readAsArrayBuffer(file);
}
$('#file').change( function(){
const selectedFile = $(this)[0].files[0];
gridExcelToWeb(selectedFile, $('#grid'))
});
</script>
위 예제코드는 input type file에서의 예제코드이다.
ajax로 바꾸는것도 어렵지는 않다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="excel.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body class='container'>
<input type='file' id='file'/>
<div id='grid'></div>
</body>
</html>
<script>
function gridExcelToWeb(file, target){
var reader = new FileReader();
reader.onload = function (evt) {
if (evt.target.readyState == FileReader.DONE) {
var data = evt.target.result;
data = new Uint8Array(data);
var workbook = XLSX.read(data, { type: 'array' });
var sheetName = '';
workbook.SheetNames.forEach( function(data, idx){ //시트 이름은 1개만 했다. 반복문 돌리면 여러개의 시트를 그린다.
if(idx == 0){
sheetName = data;
}
});
var toHtml = XLSX.utils.sheet_to_html(workbook.Sheets[sheetName], { header: '' });
target.html(toHtml);
target.find('table').attr({class:'table table-bordered',id:'excelResult'});
}
};
reader.readAsArrayBuffer(file);
}
$.ajax({
url: 'excel.xlsx',
cache: false,
contentType: 'application/x-www-form-urlencoded;',
success: function(data) {
console.log(data);
gridExcelToWeb(selectedFile, data)
},
error : function (err){
console.log(err);
}
});
</script>
workbook에 메타데이터를 활용하면 여러 형태로 가공이 편리하다.
반응형
'Javascript > [중요] Javascript' 카테고리의 다른 글
| Javascript 배열 정렬 (Array Sort) (0) | 2019.07.18 |
|---|---|
| Parcel 웹 어플리케이션 번들러 (0) | 2019.07.16 |
| ES6 문법을 HTML에 활용해보기 (0) | 2019.04.27 |
| Input type File 다중 파일 선택 & Ajax 전송 (0) | 2019.04.27 |
| Firebase 파일다운로드 크로스 도메인(Cross-origin) (4) | 2019.04.27 |
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)
댓글