2010. 6. 16. 19:28
JQUERY
jQuery 를 이용해서 HTML 테이블을 엑셀로 저장하는 간단한 방법입니다.
서버소스
<?php
header("Content-type: application/vnd.ms-excel; name='excel'");
header("Content-Disposition: filename=export.xls");
// Fix for crappy IE bug in download.
header("Pragma: ");
header("Cache-Control: ");
?>
<html>
<head></head>
<body><?=$_REQUEST['dataToDisplay']?>
</body>
</html>
다음은 HTML 코드입니다.
<form action="/SaveToExcel.php" method="post" target="_blank"
onsubmit='$("#dataToDisplay").val( $("<div>").append( $("#ReportTable").eq(0).clone() ).html() )'>
<pre><input type="image" src="/images/icons/save_excel.png"></pre>
<pre><input type="hidden" id="dataToDisplay" name="dataToDisplay" />
</form>
설명
reportTable - 저장하기 원하는 테이블 ID
dataToDisplay - 서버로 POST될 베이블을 위한 hidden변수
폼의 onSubmit시에 저장할 HTML 테이블을 jQuery 메서드로 쉽게 처리할수 있다.
<table>을 포함한 HTML코드를 가져오는 부분의 처리가 중요하다.
jQuery.html() 메서드는 innerHTML만 가져오므로 table id를 기준으로 실행하면 <table> 태그가 빠지게 된다.
그래서 <div> 안에 전체 <table> 을 append하면 <div> <table>...</table> </div> 가 되고
여기서 .html() 을 실행하면 <table>...</table> 을 리턴하므로 원하는 결과를 얻을 수 있다.
서버소스
<?php
header("Content-type: application/vnd.ms-excel; name='excel'");
header("Content-Disposition: filename=export.xls");
// Fix for crappy IE bug in download.
header("Pragma: ");
header("Cache-Control: ");
?>
<html>
<head></head>
<body><?=$_REQUEST['dataToDisplay']?>
</body>
</html>
