본문 바로가기

※/공부

화면에서 엑셀(xlsx) export하기

예전 프로젝트에서 화면에 있는 상태 그대로 엑셀을 export해야하는 화면이 있었다.

db에서 조회해서 뿌리긴하나 사용자가 화면에서 데이터를 변경하고 서버에 저장하지 않은 상태로 엑셀을 export하는 기능이 필요했었다.


그래서 구글링을 한 결과 table2excel라는 플러그인을 발견했다.

사용법이 간단해서 빠르게 페이지에 붙일 수 있었다.

그러나 단점이 있었다.


xlsx확장자를 지원하지 않는다. 사실 xls확장자로 export해도 크게 문제는 없다.

하지만 xls확장자로 export하면 파일을 열었을때, 안전하지않을 수도 있다는 등의 알림창이 뜬다.

무시하고 닫으면 되지만 은근 귀찮고 신경쓰인다.


table2excel 스크립트를 뒤져보니 xlsx확장자로 export해주는 부분은 없었고

인터넷을 뒤져보니 xlsx확장자로 export하려면 추가로 작업을 해줘야한다는 것을 알아냈다.

그래서 과감히 table2excel를 버리고 새로운 것을 열심히 찾아냈다.


바로 tableExport이다!!!(서론이 길었다.)

내용물을 보면 pdf같은 파일도 가능한 것 같다. 여러모로 쓸모가 있다.


먼저, 로드 해야하는 스크립트이다. 참고로 엑셀에 필요한 것만 로드했다.

(스크립트 파일들은 아마 여기서 구할 수 있을 것이다. https://www.npmjs.com/package/tableexport.jquery.plugin )

1
2
3
4
5
6
<script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
 
<script src="../../js/tableExport.js" type="text/javascript"></script>
<script src="../../js/xlsx.core.min.js" type="text/javascript"></script>
<script src="../../js/FileSaver.js" type="text/javascript"></script>
<script src="../../js/html2canvas.min.js" type="text/javascript"></script>
cs



함수 호출 부분

1
2
3
4
5
6
7
8
9
10
11
12
$('#gview_jqGrid table').tableExport({
    ,mfileName:"사용자 목록_" + new Date().toISOString().replace(/[\-\:\.]/g, "")
    ,type:'excel'
    ,excelstyles:['background-color''font-weight''text-align''width''font-size']
    ,mso: {  styles:['background-color''font-weight''text-align''width''font-size']
            ,worksheetName: "사용자 목록"
            ,fileFormat: "xlsx"}
    ,ignoreRow: null                    // (Number, Number[]), row indices to exclude from the exported file(s)
    ,ignoreColumn: [13,14,15,16,17,18]  // (Number, Number[]), column indices to exclude from the exported file(s)
    ,htmlContent: false
    ,exportHiddenCells: true
});

cs


jqGrid로 그린 그리드를 export하려다 보니 약간의 귀찮은 부분이 있었다.

jqGrid는 헤더부분 따로 데이터 부분 따로 그리기 때문에 화면에서는 모르겠지만 

실제로는 table이 두개가 붙어있는 것이다.


어떻게 테이블 두개를 엑셀로 export해야하는지 잠시 당황했었는데

그냥 jquery 선택자를 헤더, 데이터 부분 포함하게 해줬더니 알아서 잘 export해준다.

(정답은 의외로 쉬운 곳에....)


단, 데이터가 많으면 과부하가 올 수 있으니 간단한 것만 하길 바란다.

테스트해봤더니 500건 정도 되는 그리드를 export 할때 1분정도 걸린거 같았다. (크롬에서)


애초에 그 정도 데이터를 엑셀로 뽑아내려면 poi를 이용해서 서버에서 하는게 최고다.

귀찮고 적은 데이터를 export할 때만 권장한다.