[jQuery] table data를 excel로 export하기

jquery를 이용하여 table내용을 excel로 export 하기.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<input type="button" id="btnExport" value=" Export Table data into Excel " />
<br/>
<br/>
<div id="dvData">
    <table>
        <tr>
            <th>Column One</th>
            <th>Column Two</th>
            <th>Column Three</th>
        </tr>
        <tr>
            <td>row1 Col1</td>
            <td>row1 Col2</td>
            <td>row1 Col3</td>
        </tr>
        <tr>
            <td>row2 Col1</td>
            <td>row2 Col2</td>
            <td>row2 Col3</td>
        </tr>
        <tr>
            <td>row3 Col1</td>
            <td>row3 Col2</td>
            <td><a href="http://www.jquery2dotnet.com/">http://www.jquery2dotnet.com/</a>
            </td>
        </tr>
    </table>
</div>
<script>
$("#btnExport").click(function (e) {
    window.open('data:application/vnd.ms-excel,' + $('#dvData').html());
    e.preventDefault();
});
</script>
cs


매우 간단.. table을 div로 감싸주고 해당 html()을 아래 명령어를 이용하여 출력해주면 끝..


1
window.open('data:application/vnd.ms-excel,' + $('#dvData').html());
cs


한글에 경우 encodeURI를 이용해서 넘겨줘야 제대로 동작.

style또한 같이 넘겨줘야 excel 내용에 style이 적용된다.


하단 jsfiddle에서도 확인 가능하다. https://jsfiddle.net/av92nw94/


** IE에서는 안된다 **



'Programming > jQuery' 카테고리의 다른 글

[jQuery] table tr toggle  (0) 2017.01.06