Programming/JavaScript
[jquery] tableExport (테이블 엑셀 다운로드) 플러그인
Edward. K
2021. 4. 1. 15:08
반응형
www.npmjs.com/package/tableexport.jquery.plugin
github.com/hhurz/tableExport.jquery.plugin
hhurz/tableExport.jquery.plugin
jQuery plugin to export a html table to JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG and PDF - hhurz/tableExport.jquery.plugin
github.com
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tableExport Plug-in</title>
</head>
<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> -->
<script src="jquery-1.12.3.min.js"></script>
<script src="tableExport.js"></script>
<script src="FileSaver.min.js"></script>
<script>
$(document).ready(function(){
$("#btnExport1").on('click', function () {
$ ('#table').tableExport({type:'excel'});
});
$("#btnExport2").on('click', function () {
$('table').tableExport({type:'excel',
excelFileFormat:'xmlss',
worksheetName: ['Table 1','Table 2' ]});
});
$("#btnExport3").on('click', function () {
$('#table').tableExport(
{type: 'excel', excelFileFormat: 'xmlss', ignoreColumn: [2,3],ignoreRow: [3,4]}
);
});
//원하는 부분만 출력하게
//ignoreColunm : [x, y], ignoreRow : [x, y]
//x부터 y까지를 제외하고 출력한다
$("#btnExport4").on('click', function () {
$('#table2').tableExport(
{type:'excel'}
);
});
$("#btnExport5").on('click', function() {
$('#table3').tableExport(
{type: 'excel',
numbers: {output: false},
excelstyles: ['background-color', 'color']}
);
});
//화면과 동일한 css를 적용하고 하고싶다면 excelstyles에 원하는 css속성 이름을 적어주면 된다.
});
</script>
<style>
body, div, ul, ol, li, p, table, th, td,h1,h2 {margin:0; padding:0;font-size:13px; word-spacing:0;}
table {border-collapse:collapse; border-spacing:0;}
.revenueInfo {padding:4px; page-break-after: always; clear: both;}
.revenueInfo table {width:100%; margin-top:4px;border-top:1px solid #c5c5c5;border-right:1px solid #c5c5c5;table-layout:fixed;word-wrap:break-word;}
.revenueInfo table th , .revenueInfo table td {padding:8px 0 5px; border-bottom:1px solid #c5c5c5;border-left:1px solid #c5c5c5;border-right:1px solid #c5c5c5;}
.revenueInfo table th {font-size:12px;color: #666666; font-weight: 600;}
.revenueInfo table caption {display:none;}
.revenueInfo tbody td {background-color:rgb(242,242,242);text-align:left; padding-left: 4px; font-size: 12px;}
.al_tot { background-color:#EDECE9; font-weight: bold;} /* 분홍> background:#FFCBCB */
.list_tot { background-color:#DAE7EE; font-weight: bold;} /* color: #FF6407; 주황> background:#FF6407, 하늘 > background:#DAE7EE */
.al_c {text-align:center !important;}
/* mouse hover color */
.mouseHover{cursor:pointer;background-color:#ffcc99 !important;} /* background-color:#fdf7df !important; **/
/* 선택일 까지의 합 */
.al_sum { background:#FCD0B5; font-weight: bold;}
.total_layerPop {position:absolute; display:none; padding:5px; width:560px; box-sizing:Border-box; border:1px solid #202022; top: 20px; left: 20px; background-color: #fff; z-index:100;}
.total_layerPop.on {display:block;}
.total_layerPop table {width: 100%; margin-top: 10px; border: 1px solid #c5c5c5; table-layout: fixed; word-wrap: break-word;}
.total_layerPop table th, .total_layerPop table td{padding: 8px 0 5px; border-bottom: 1px solid #c5c5c5; border-left: 1px solid #c5c5c5; border-right: 1px solid #c5c5c5;}
.total_layerPop table th {background-color:#eae9e9;}
.total_layerPop table td {padding-right:4px; text-align:right; border-bottom:1px solid #c5c5c5;}
.btn { background-color: #2E6E9E; color: white; padding: 3px 15px 3px 15px; border: 0px; border-radius: 3px; cursor: pointer;}
.table-striped > tbody > tr:nth-child(2n+1) > td {background-color: #ccdf88;}
</style>
<body>
<div class="revenueInfo">
<table id="table">
<thead>
<tr id="inflowTable1"> <th>PC/MO</th> <th>유입경로</th> <th>페이지</th> <th>페이지 상세</th> <th>접속 건수</th> </tr>
</thead>
<tbody id="inflowTable2">
<tr class=""> <td class="al_c">PC</td> <td class="al_c">eknote</td> <td class="al_c">공지사항</td> <td class="">남동산업</td><td class="al_c">1</td> </tr>
<tr class=""> <td class="al_c">PC</td> <td class="al_c">eknote</td> <td class="al_c">메인페이지</td> <td class=""></td> <td class="al_c">4</td> </tr>
<tr class=""> <td class="al_c">Mobile</td> <td class="al_c">eknote</td> <td class="al_c">Season</td> <td class="">뽀삐뽀삐</td> <td class="al_c">1</td> </tr>
<tr class=""> <td class="al_c">Mobile</td> <td class="al_c">eknote</td> <td class="al_c">메인페이지</td> <td class=""></td> <td class="al_c">2</td> </tr>
</tbody>
</table>
</div>
<div class="revenueInfo">
<table>
<thead>
<tr id="inflowTable1"> <th>PC/MO</th> <th>유입경로</th> <th>페이지</th> </tr>
</thead>
<tbody id="inflowTable2">
<tr class=""> <td class="al_c">PC</td> <td class="al_c">eknote</td> <td class="al_c">공지사항</td> </tr>
<tr class=""> <td class="al_c">PC</td> <td class="al_c">eknote</td> <td class="al_c">메인페이지</td> </tr>
<tr class=""> <td class="al_c">Mobile</td> <td class="al_c">eknote</td> <td class="al_c">Season</td> </tr>
<tr class=""> <td class="al_c">Mobile</td> <td class="al_c">eknote</td> <td class="al_c">메인페이지</td> </tr>
</tbody>
</table>
</div>
<div class="revenueInfo">
<table id="table2">
<thead>
<tr id="inflowTable1"> <th>PC/MO</th> <th>유입경로</th> </tr>
</thead>
<tbody id="inflowTable2">
<tr class=""> <td colspan="2" class="al_c">PC</td> </tr>
<tr class=""> <td class="al_c">PC</td> <td class="al_c">eknote</td> </tr>
</tbody>
</table>
</div>
<div class="revenueInfo">
<table class="table-striped" id="table3">
<thead>
<tr> <th>PC/MO</th> <th>유입경로</th> </tr>
</thead>
<tbody>
<tr> <td class="al_c">Mobile</td> <td class="al_c">eknote</td> </tr>
<tr> <td class="al_c">PC</td> <td class="al_c">eknote</td> </tr>
<tr> <td class="al_c">Mobile</td> <td class="al_c">eknote</td> </tr>
</tbody>
</table>
</div>
<input type="button" value="기본 엑셀다운로드" class="btn" id="btnExport1" title="기본 엑셀다운로드"/>
<input type="button" value="테이블 2개 이상 엑셀다운" class="btn" id="btnExport2" title="테이블 2개 이상 엑셀다운"/>
<input type="button" value="원하는부분만 엑셀다운" class="btn" id="btnExport3" title="원하는부분만 엑셀다운"/>
<input type="button" value="rowspan테이블 엑셀다운" class="btn" id="btnExport4" title="rowspan테이블 엑셀다운"/>
<input type="button" value="스타일적용 엑셀다운" class="btn" id="btnExport5" title="스타일적용 엑셀다운"/>
</body>
</html>
* P.S. 모든 파일 포멧 다운로드
www.jqueryscript.net/demo/Exporting-Html-Tables-To-CSV-XLS-XLSX-Text-TableExport/
반응형