먼저 다음 URL은 별도의 페이지를 만들고 그 페이지를 호출하여 엑셀 다운로드 예제이다.

참고

http://cofs.tistory.com/46

 

 

 

 

 

 

Javascript로 화면에 그려져 있는 Table 속성을 엑셀로 다운받는 예제이다.

 

Jsp 에서 화면에 스크립트릿이나 el, jstl 등을 이용하여 List 데이터를 가지고

 

table로 목록을 만들고 그 목록을 그대로 엑셀로 다운받는 예제이다.

 

본 예제는 이미 테이블이 그려져있는 상태를 가지고 구현되었다.

 



 

필수 : jquery, 첨부파일 js 상속


브라우저별로 다른 다운로드 방식 : ie , 그외

 

<script language="javascript">
 
    function downloadExcel(targetId, SaveFileName) {
        var browser = navigator.userAgent.toLowerCase();
        // ie 구분
        if (-1 != browser.indexOf('trident')) {
            downloadExcelIe(targetId, SaveFileName);
        } else {
            var cssText = '.aaaa {font-size:11px; color:#333333; border:2px solid black; padding:10px 5px 8px 5px; background-color:#F3F5E0;}';
            $("#table_holiday").btechco_excelexport({
                containerid : targetId,
                datatype : $datatype.Table,
                cssStyle : cssText
            });
        }
    }
 
    function downloadExcelIe(targetId, SaveFileName) {
 
        // 방법 1이나 2 중 아무거나 되는거 쓰자
 
        // **********************

        // 방법 1 

        // 방법 1 

 
        // 스타일 변경 outline 스타일 가져와서 적용 가능
        /*
        var targetObj = document.getElementById(targetId);
        var outputCss = targetObj.currentStyle;
        targetObj.style.backgroundColor = outputCss.getAttribute('background-color');
        targetObj.style.borderStyle = outputCss.getAttribute('border-style');
        targetObj.style.border = outputCss.getAttribute('border');
         */
 
        // 스타일 변경 수동 적용 가능
        var cssText = '<style type="text/css">';
        cssText += '.aaaa {font-size:11px; color:#333333; border:2px solid black; padding:10px 5px 8px 5px; background-color:#F3F5E0;}';
        cssText += '</style>';
 
        var output = document.getElementById(targetId).outerHTML;
 
        if (!SaveFileName) {
            SaveFileName = 'FilteredReport.xls';
        }
 
        var oWin = window.open("about:blank""_blank");
 
        oWin.document.write(cssText);
        oWin.document.write(output);
        oWin.document.close();
        // success = true, false
        var success = oWin.document.execCommand('SaveAs'false, SaveFileName);
        oWin.close();
 
        // **********************

        // 방법 2     

        // 방법 2   

        if (document.all.excelExportFrame == null// 프레임이 없으면 만들자~!
        {
            var excelFrame = document.createElement("iframe");
            excelFrame.id = "excelExportFrame";
            excelFrame.name = "excelExportFrame";
            excelFrame.position = "absolute";
            excelFrame.style.zIndex = -1;
            excelFrame.style.visibility = "hidden";
            excelFrame.style.top = "-10px";
            excelFrame.style.left = "-10px";
            excelFrame.style.height = "0px";
            excelFrame.style.width = "0px";
            document.body.appendChild(excelFrame); // 아이프레임을 현재 문서에 쑤셔넣고..
        }
        var frmTarget = document.all.excelExportFrame.contentWindow.document// 해당 아이프레임의 문서에 접근
 
        if (!SaveFileName) {
            SaveFileName = 'test.xls';
        }
 
        frmTarget.open("text/html""replace");
        frmTarget.write('<html>');
        frmTarget
                .write('<meta http-equiv="Content-Type" content="application/vnd.ms-excel; charset=euc-kr"/>\r\n'); // 별로..
        frmTarget.write('<body onload="saveFile();">');
        frmTarget.write(document.getElementById(targetId).outerHTML); // tag를 포함한 데이터를 쑤셔넣고
        frmTarget.write('<script language="javascript">');
        frmTarget
                .write('function saveFile(){document.execCommand("SaveAs", true, "'
                        + SaveFileName + '");}');
        frmTarget.write('<\/script>');
        frmTarget.write('</body>');
        frmTarget.write('</html>');
        frmTarget.close();
        //frmTarget.charset="UTF-8"; // 자 코드셋을 원하는걸로 맞추시고..
        frmTarget.charset = "euc-kr";
        frmTarget.focus();
 
    }
</script>
cs

 



 

테스트 !!!!!

*테스트 하기
 
 
<h1>엑셀저장 테스트 </h1>
<br>
테이블만 저장 1 : <input type="button" value="excel" onclick="downloadExcel('tblMain')">
<br>
 
  <table border="1" id="tblMain" >
    <tr>
      <td rowspan="2">이름</td>
      <td>김호두</td>
      <td></td>
    </tr>
    <tr>
      <td colspan="2">김자두</td>
    </tr>
    <tr>
      <td rowspan="2">나이</td>
      <td colspan="2">20</td>
    </tr>
    <tr>
      <td>21</td>
      <td></td>
    </tr>
 
</table>
 
 
cs

 

////////////////////////////////////////////////////////////////////////


셀서식 관련 내용입니다.

Styling Excel cells with mso-number-format

Styling Excel cells with mso-number-format
mso-number-format:"0" NO Decimals
mso-number-format:"0\.000" 3 Decimals
mso-number-format:"\#\,\#\#0\.000" Comma with 3 dec
mso-number-format:"mm\/dd\/yy" Date7
mso-number-format:"mmmm\ d\,\ yyyy" Date9
mso-number-format:"m\/d\/yy\ h\:mm\ AM\/PM" D -T AMPM
mso-number-format:"Short Date" 01/03/1998
mso-number-format:"Medium Date" 01-mar-98
mso-number-format:"d\-mmm\-yyyy" 01-mar-1998
mso-number-format:"Short Time" 5:16
mso-number-format:"Medium Time" 5:16 am
mso-number-format:"Long Time" 5:16:21:00
mso-number-format:"Percent" Percent - two decimals
mso-number-format:"0%" Percent - no decimals
mso-number-format:"0\.E+00" Scientific Notation
mso-number-format:"\@" Text
mso-number-format:"\#\ ???\/???" Fractions - up to 3 digits (312/943)
mso-number-format:"\0022£\0022\#\,\#\#0\.00" £12.76
mso-number-format:"\#\,\#\#0\.00_ \;\[Red\]\-\#\,\#\#0\.00\ "

2 decimals, negative numbers in red and signed
(1.56 -1.56)

 

 

도움이 되셨다면 공감을 부탁드립니다. ^^  

by 개발자 CofS 2016.01.05 12:02