카테고리
|
공부한것들을 정리하는 블로그 입니다.
6. JavaScript 및 Java 엑셀 다운로드 : ie chrome 브라우저별로 구현 본문
(2019) 사이드 프로젝트/AdminMngSys(관리자페이지-MVC1,MVC2)
6. JavaScript 및 Java 엑셀 다운로드 : ie chrome 브라우저별로 구현
호 두 2019. 11. 20. 14:31반응형
손쉽게 구현 가능한 엑셀 다운로드 기능은 크게 2가지가 있습니다.
1. Java 대용량 엑셀 다운로드
2. JavaScript 엑셀 다운로드
1. Java 대용량 엑셀 다운로드는 POI 라이브러리 또는 JXLS 라이브러리를 이용하는 방법입니다.
자바에서 제공해주는 템플릿을 토대로 원하는 데이터를 엑셀 속성에 담아 다운로드 받을 수 있습니다.
2. JavaScript 엑셀 다운로드는 화면에 출력되어있는 정적페이지의 속성을 엑셀 템플릿으로 다운받는 방법입니다.
엑셀 속성에 담아 줄 데이터만 있으면 되는 Java 엑셀 다운로드 방식과는 다르게,
- 해당 데이터를 실제로 정적페이지에 Table 등의 속성으로 로드해준 다음.
- 해당 Table 속성을 새창에서 팝업한 후
- 엑셀로 다운받고
- 팝업을 닫는 일련의 과정이 존재합니다.
또한 ie, chrome 등 브라우저별로 다운로드 방식이 다릅니다(보통 ie와 그 외로 나뉨). 따라서 브라우저 정합성 체크 로직도 함께 구현해 주셔야 합니다.
참고 : https://newehblog.tistory.com/3
엑셀저장 화면
소스코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<h1>엑셀저장 테스트</h1>
<div class="main-content">
<div class="main-content-inner">
<div class="page-content">
<table id="table">
<caption>Excel Download</caption>
<thead>
<tr>
<th></th>
<th>sample</th>
<th>sample</th>
<th>sample</th>
</tr>
</thead>
<tbody>
<tr>
<th>sample</th>
<td>Text</td>
<td>Text</td>
<td rowspan="2">Text</td>
</tr>
<tr>
<th>sample</th>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<th>sample</th>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>
<button type="button" onclick="fnExcelReport('table','title');">Excel
Download</button>
</div>
</div>
<style>
table {
width: 100%;
}
table, th, td {
border: 1px solid;
}
</style>
<script>
function fnExcelReport(id, title) {
var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
tab_text = tab_text
+ '<head><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
tab_text = tab_text
+ '<xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
tab_text = tab_text + '<x:Name>Test Sheet</x:Name>';
tab_text = tab_text
+ '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
tab_text = tab_text
+ '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';
tab_text = tab_text + "<table border='1px'>";
var exportTable = $('#' + id).clone();
exportTable.find('input').each(function(index, elem) {
$(elem).remove();
});
tab_text = tab_text + exportTable.html();
tab_text = tab_text + '</table></body></html>';
var data_type = 'data:application/vnd.ms-excel';
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
var fileName = title + '.xls';
//Explorer 환경에서 다운로드
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
if (window.navigator.msSaveBlob) {
var blob = new Blob([ tab_text ], {
type : "application/csv;charset=utf-8;"
});
navigator.msSaveBlob(blob, fileName);
}
} else {
var blob2 = new Blob([ tab_text ], {
type : "application/csv;charset=utf-8;"
});
var filename = fileName;
var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob2);
elem.download = filename;
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
}
}
</script>
</body>
</html>
다운로드 된 엑셀 확인
주의하실 점은, 페이징처리 된 부분(rownum)에 해당하는 데이터 뿐 아니라 전체 데이터을 엑셀 다운로드 할 경우에는
- 전체데이터 엑셀 다운로드를 위한 버튼 및 sql을 새로 만들어 주시고
- html table 속성에 로딩 후 display hidden 처리
- excel download 후
- 해당 table을 remove 해야 합니다
동기로 호출되도록 유념하시기 바랍니다.
function callback_fnExcelReport() {
$("#init-table").remove();
}jquery의 remove()는 div의 id만 제거하므로 유념하시기 바랍니다.
jsp 파일첨부
admin_excelDownload.jsp
0.00MB
추가) 제가 사용했던 코드 중 일부 첨부
$(document).ready(function(){
// 엑셀다운로드 버튼 클릭
$("#btnExcelDownload").click(function(e) {
e.preventDefault();
var type = "getFilelogInfoList";
var url = "dao/getFilelogInfoList.jsp";
var searchkeyword=$("#downloadInfoSearchkeyword").val
if(searchkeyword == null) searchkeyword = "";
console.log("btnExcelDownload] searchkeyword=" + searchkeyword);
var selecDepthVal = sessionStorage.getItem("e_selectDepthval");
var path = "ALLPATH";
if (selecDepthval != "" && selecDepthval != null) {
path = selecDepthval;
}
console.log("btnExcel Download path=" + path);
$.ajax({
url: url,
type: 'GET',
async: false,
cache: false,
data: {
type:type,
searchkeyword:searchkeyword,
path:path
},
error: function(qxhr, textStatus, error) {
alert(textStatus + '\n' + error);
},
success: function(data) {
// 브라우저 식별(ie/chrome)
fn_browserFilter();
console.log("[btnExcelDownload]g browserFilter=" + g_browserFilter);
var strXML = data.strXML;
//console.log(strXML);
var jQueryFilelogContainer = jQuery("#filelogInfoData2");
jQueryFilelogContainer.html(strXML)
.promise().done(function() {
// ie chrome 으르 분류
if(g_browserFilter == "ie") {
fn_downloadExcelle("downloadInfoDataPaging2");
} else if(g_browserFilter == "chrome") {
fn_downloadExcelChrome("downloadInfoDataPaging2")
}
})
.promise().done(function() {
$("#uploadInfoDataTb12").remove();
});
}
});
});
});
// 엑셀 다운로드 chrome
function fn_downloadExcelChrome(targetid) {
var fileName = "brandmeta.xls";
var a = document.createElement('a');
var data_type = 'data: application/vnd.ms-excel;charset=utf-8,%EF%BB%BF';
var table_div = document.getElementById(targetId);
var table_html = table_div.outerHTML.replace(/ /g, '%20');
a.href = data_type + ', ' + table_html;
a.download = fileName;
a.click();
}
// 엑셀 다운로드 ie
function fn_downloadExcelle(targetId) {
var output = document.getElementById(targetId).outerHTML;
var fileName = 'brandmeta.xls';
var oWin = window.open("about:blank","_blank");
oWin.document.write(output);
oWin.document.close();
var success = oWin.document.excelCommand('SaveAs', false, fileName);
oWin.close();
}
반응형
'(2019) 사이드 프로젝트 > AdminMngSys(관리자페이지-MVC1,MVC2)' 카테고리의 다른 글
| 8. 저장 버튼 클릭시 수정된 파일(HTML,CSS,JS)내용을 서버에 저장하는 기능 (0) | 2019.11.20 |
|---|---|
| 7-1. 캐시처리 v=1 (0) | 2019.11.20 |
| 7. 특정 경로에 있는 파일(HTML,CSS,JS) 읽어서 화면에 출력하는 기능 (0) | 2019.11.20 |
| 6-1. ie chrome 브라우저 체크 (0) | 2019.11.20 |
| 5. 버튼 클릭으로 특정경로의 파일 삭제하는 기능 : 프론트엔드, 동적으로 구현(Dynamic) (0) | 2019.08.27 |
| 4. 마우스 우클릭,드래그를 차단하는 기능 : javascript, jQuery (2) | 2019.08.27 |
| 3. 특정 경로에 있는 파일명(file list) 읽어오는 기능 + Ajax로 동적으로 이미지 로딩(Dynamic) (0) | 2019.08.27 |
| 2. 파일 다운로드 기능 (0) | 2019.08.27 |
'(2019) 사이드 프로젝트/AdminMngSys(관리자페이지-MVC1,MVC2)' Related Articles
more
Comments