JSP/SERVLET
2020.09.21 / 11:15
HTML Table을 엑셀로 내보내기 : Export to excel sheet on client side
XMaLL관리자
추천 수 180
HTML Table을 엑셀로 저장하기 : Export to excel sheet on client side
1. <A> 엘리먼트의 download 속성을 이용하여 저장하기.
2. <A> 엘리먼트의 download속성과 URL에 data타입을 사용하기, 엑셀 파일 이름 지정하기.
3. jquery.battatech.excelexport 라이브러리를 사용하기.
4. jquery.battatech.excelexport 라이브러리를 사용하여 파일이름 지정하기.
5. jquery.battatech.excelexport 라이브러리를 사용하여 파일이름 지정하기2.
1. <A> 엘리먼트의 download 속성을 이용하여 저장하기.
[ code ]
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="Author" content="serpiko@hanmail.net" />
<meta name="description" content="http://serpiko.tistory.com" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<meta name="format-detection" content="telephone=no" />
<link rel="styleesheet" type="text/css" href="" />
<link rel="shortcut icon" href="" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<title>Document</title>
<style>
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
table{
width: 650px;
text-align: center;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="wrap">
<table id='tblExport'>
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Type</th>
<th>Author</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>SAP : Study And Programming</td>
<td>Blog</td>
<td style='background-color: LightBlue;'>Serpiko</td>
<td>http://serpiko.tistory.com/</td>
</tr>
<tr>
<td>2</td>
<td>Twitter</td>
<td>SNS</td>
<td>Obvious, LLC</td>
<td>https://www.twitter.com/</td>
</tr>
<tr>
<td>3</td>
<td>Instagram</td>
<td>SNS</td>
<td>Kevin Systrom, Mike Krieger</td>
<td>https://instagram.com/</td>
</tr>
</tbody>
</table>
<button id='btnExport' type='button'>Export</button>
</div>
<script>
$(document).ready(function(){
$('#btnExport').click(function(){
var link = document.createElement('a');
link.download = "myFirstExample.xls";
link.href = 'data:,' + $('#tblExport').text();
link.click();
});
});
</script>
</body>
</html>
32 : table에 id를 지정해 준다.
67 : button을 만들고 id를 지정해 준다.
73 : 새로운 엘리먼트인 <a>를 만들고
74 : HTML5 에서 추가된 속성인 download 속성에 파일 이름인 "myFirstExample.xls"를 지정해 준다.
75 : URL에 data형식, 표시될 내용을 넣고
76 : <a> 엘리먼트를 클릭한 것과 같은 트리거를 넣어준다.
[ 직접 보기 ↓ www.serpiko.meximas.com/JAVASCRIPT/excel/01_dataUse.html ]
[결과 화면]
myFirstExample.xls 로 제대로 저장되고 실행도 된다.
그러나 셀에 내용을 살펴 보면 테이블이 아닌 일반 텍스트로 내용이 들어가 있어서 표의 형태가 아니다.
2. <A> 엘리먼트의 download속성과 URL에 data타입을 사용하기, 엑셀 파일 이름 지정하기.
[ code ]
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="Author" content="serpiko@hanmail.net" />
<meta name="description" content="http://serpiko.tistory.com" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<meta name="format-detection" content="telephone=no" />
<link rel="styleesheet" type="text/css" href="" />
<link rel="shortcut icon" href="" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<title>Document</title>
<style>
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
table{
width: 650px;
text-align: center;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="wrap">
<table id='tblExport'>
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Type</th>
<th>Author</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>SAP : Study And Programming</td>
<td>Blog</td>
<td style='background-color: LightBlue;'>Serpiko</td>
<td>http://serpiko.tistory.com/</td>
</tr>
<tr>
<td>2</td>
<td>Twitter</td>
<td>SNS</td>
<td>Obvious, LLC</td>
<td>https://www.twitter.com/</td>
</tr>
<tr>
<td>3</td>
<td>Instagram</td>
<td>SNS</td>
<td>Kevin Systrom, Mike Krieger</td>
<td>https://instagram.com/</td>
</tr>
</tbody>
</table>
<button id='btnExport' type='button'>Export</button>
</div>
<script>
$(document).ready(function(){
function itoStr($num)
{
$num < 10 ? $num = '0'+$num : $num;
return $num.toString();
}
var btn = $('#btnExport');
var tbl = 'tblExport';
btn.click(function(e){
var dt = new Date();
var year = itoStr( dt.getFullYear() );
var month = itoStr( dt.getMonth() + 1 );
var day = itoStr( dt.getDate() );
var hour = itoStr( dt.getHours() );
var mins = itoStr( dt.getMinutes() );
var postfix = year + month + day + "_" + hour + mins;
var fileName = "MyTable_"+ postfix + ".xls";
var a = document.createElement('a');
var data_type = 'data:application/vnd.ms-excel';
var table_div = document.getElementById( tbl );
var table_html = table_div.outerHTML.replace(/ /g, '%20');
a.href = data_type + ', ' + table_html;
a.download = fileName;
a.click();
e.preventDefault();
});
});
</script>
</body>
</html>
32 : table에 id를 지정해 준다.
67 : button을 만들고 id를 지정해 준다.
73 : 10 이하인 수는 0을 붙여준다. 반환값의 타입은 문자열 속성이다.
84 ~ 89 : 년 월 일 시간 분 을 파일이름에 바인딩 하기 위해서 선언된 변수들이며, 2015년 4월 3일인 경우
2015 4 3 이 되는데 문자열 속성으로 변환하지 않으면
91 : 91번 라인 처럼 변수+변수를 하게 되면 우리가 원하는 "2015 + 4 + 3 = 201543" 이 아니라 연산이 되어서 2022로 변한다.
따라서 일단 한자릿 수 일경우 0을 붙여주고 문자열 처리(73)를 하면 "2015" + "04" + "03" ... 이 되고 "20150403"이 된다.
97: outerHTML으로 <table id='tblExport'> ~ </table> 의 범위까지 잡고,
( innerHTML은 <table id='tblExport> 의 안에있는 <thead>~</tbody> 까지를 대상으로 한다. )
table_div의 공백을 %20으로 치환한다.
공백을 치환하는 이유는 "My Str Variables"와 같이 띄어쓰기된 부분을 %20으로 인코딩 하기 위해서 이며
2가지 방법이있다.
var uri = "My Str Variables";
encodeURI(uri); //결과 : My%20Str%20Variables
uri.replace(/ /g, '%20'); //결과 : My%20Str%20Variables
결과는 모두 같다.
다시 풀어서 사용하려면 console.log( decodeURI(str) ); // "My Str Variables"
94~101 : 위 (1. <A> 엘리먼트의 download 속성을 이용하여 저장하기.) 에서 설명한 내용과 같다.
103 : btn = $("#btnExport") 를 클릭했을 때 발생되는 event를 처리하는데 preventDefault를 쓰는 이유는 다음과 같다.
ㄱ. 현재 버튼이 button이 아닌 A element이고 A element를 쓰는 이유는? 파일 네임을 바인딩 하기 위해서 download속성을
사용하고 엑셀 기능을 href에 URL로 사용하기 위해서 이다.
ㄴ. 기존 <a>링크를 클릭했을때 이 요소에 click 이벤트 핸들러를 등록한다면, click 이벤트 실행과 동시에 새로운 페이지를
로드하게 된다. 마찬가지로 form도 기본동작인 submit 이벤트가 발생하는데, 이런 기본 동작을 중지시키고 click 이벤트
핸들러만 실행 시키게 하는 방법이 바로 preventDefault 메서드를 사용하는 것이다.
[ 직접 보기 ↓ http://www.serpiko.meximas.com/JAVASCRIPT/excel/02_dataAndAuse.html ]
[결과 화면 ]
위에 살펴보았던 것 과 다르게 테이블의 형태를 유지하며, 파일이름도 지정해 줄 수 있다.
그러나 자세히 보면 엑셀 특유의 그리드가 보이지 않는다.
3. jquery.battatech.excelexport 라이브러리를 사용하기.
1,2 의 단점을 모두 해결해 줄 jquery.battatech.excelexport 라이브러리를 소개한다.
단순히 TABLE element말고도 XML, JSON 등을 같이 지원한다.
다운로드 https://github.com/battatech/battatech_excelexport
jquery.techbytarun.excelexportjs.min.js
jquery.techbytarun.excelexportjs.js
개요 : http://battatech.com/blog/how-to-export-to-excel-sheet-on-client-side
기본사용법은 다음과 같다.
[ code ]
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="Author" content="serpiko@hanmail.net" />
<meta name="description" content="http://serpiko.tistory.com" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<meta name="format-detection" content="telephone=no" />
<link rel="styleesheet" type="text/css" href="" />
<link rel="shortcut icon" href="" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.battatech.excelexport.js"></script>
<title>Document</title>
<style>
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
table{
width: 650px;
text-align: center;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="wrap">
<table id='tblExport'>
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Type</th>
<th>Author</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>SAP : Study And Programming</td>
<td>Blog</td>
<td style='background-color: LightBlue;'>Serpiko</td>
<td>http://serpiko.tistory.com/</td>
</tr>
<tr>
<td>2</td>
<td>Twitter</td>
<td>SNS</td>
<td>Obvious, LLC</td>
<td>https://www.twitter.com/</td>
</tr>
<tr>
<td>3</td>
<td>Instagram</td>
<td>SNS</td>
<td>Kevin Systrom, Mike Krieger</td>
<td>https://instagram.com/</td>
</tr>
</tbody>
</table>
<button id='btnExport' type='button'>Export</button>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#btnExport").click(function () {
$("#tblExport").excelexportjs({
containerid: "tblExport"
, datatype: 'table'
});
});
});
</script>
</body>
</html>
15 ~ 16 : 엑셀 라이브러리를 불러오기 전에 반드시 제이쿼리 엔진이 먼저 호출되어야 한다.
33 : Table에 ID를 지정해 주고
68 : Button 에 ID를 지정해 준다.
73 : 버튼을 클릭하면 battatech_excelexport 객체에 접근하여 containerid는 테이블이름, datatype은 table로 지정해 준다.
[ 직접 보기 ↓ http://www.serpiko.meximas.com/JAVASCRIPT/excel/03_libTable.html ]
[ 결과 확인 ]
드디어 말끔하게 이상없이 다 출력된다. 그러나 파일명을 지정하지 않았기 때문에 "다운로드.xls"로 되어있다.
4. jquery.battatech.excelexport 라이브러리를 사용하여 파일이름 지정하기.
jquery.battatech.excelexport 라이브러리에서 파일명을 지정하는 방법은 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="Author" content="serpiko@hanmail.net" />
<meta name="description" content="http://serpiko.tistory.com" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<meta name="format-detection" content="telephone=no" />
<link rel="styleesheet" type="text/css" href="" />
<link rel="shortcut icon" href="" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.battatech.excelexport.js"></script>
<title>Document</title>
<style>
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
table{
width: 650px;
text-align: center;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="wrap">
<table id='tblExport'>
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Type</th>
<th>Author</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>SAP : Study And Programming</td>
<td>Blog</td>
<td style='background-color: LightBlue;'>Serpiko</td>
<td>http://serpiko.tistory.com/</td>
</tr>
<tr>
<td>2</td>
<td>Twitter</td>
<td>SNS</td>
<td>Obvious, LLC</td>
<td>https://www.twitter.com/</td>
</tr>
<tr>
<td>3</td>
<td>Instagram</td>
<td>SNS</td>
<td>Kevin Systrom, Mike Krieger</td>
<td>https://instagram.com/</td>
</tr>
</tbody>
</table>
<a id="btnExport" href="#" download="">Export</a>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#btnExport").on('click', function () {
var uri = $("#tblExport").excelexportjs({
containerid: "tblExport"
, datatype: 'table'
, returnUri: true
});
$(this).attr('download', 'ExportToExcel.xls').attr('href', uri).attr('target', '_blank');
});
});
</script>
</body>
</html>
68 : 위에서 썼던 방식과 다르게 button element가 아니라 <a> element를 사용한다.
77 : battatech_excelexport객체의 멤버변수인 returnUri가 기본값이 false로 되어있는데 true로 바꾸어준다.
출처: https://serpiko.tistory.com/581 [삽SAP(Study And Programming) 질 블로그. by허정진]