javascript / 화면 엑셀 다운로드 / table / 테이블 다운로드 / excel / iframe 다운로드

2016. 1. 5. 12:02language/javascript

 

 

 

 

 

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

참고


 별도 페이지에서 엑셀 다운로드

 

 

 

 

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)

 

 

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