◎ tabl2excel 라이브러리 사용

▼ 내용

table to excel converter

java 단이나 jsp 단으로 poi나 jxl 라이브러리를 사용할수있지만.... 

js 로 바꾸고싶어 찾아보다 사용하기 편한 라이브러리를 발견하여 관련된 사용법을 작성합니다.


아래 소스를 다운받아 엑셀로 실행하엿을경우 위 그림처럼 export가 된다.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script> <script type="text/javascript" src="../scripts/jquery.table2excel.js"></script> </head> <body> <table id="TableToExcel" border=2 width=710 cellpadding=0 cellspacing=0 class='table table-bordered' align=center style='border-collapse:collapse;' > <thead> <tr> <td>번호</td> <td>번호</td> <td>번호</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> </tbody> </table> <iframe id="txtArea1" style="display:none"></iframe> <!-- IE 호환을 위해서 iframe을 추가해야한다 --> <!-- IE에서는 txtArea1 의 객체를 찾기 때문이다. 크롬은 없어도 된다. 있어도 상관은 없다. --> <input type='button' class='btn btn-inverse' value='excel 다운' style='width:100px;height:36px;font-weight:bold;' onclick="ReportToExcelConverter()" /> </body> <script> function ReportToExcelConverter() { $("#TableToExcel").table2excel({ exclude: ".noExl", name: "Excel Document Name", filename: "report" +'.xls', //확장자를 여기서 붙여줘야한다. fileext: ".xls", exclude_img: true, exclude_links: true, exclude_inputs: true }); }; </script> </html>

위 소스처럼 table의 id를 지정하고 제이쿼리함수 $("#아이디") 를 지정한다음 위 소스처럼 작성하면 table 을 자동으로 excel 형식으로 export 해준다. script 를 불러올때 꼭 jquery 를 부른다음 table2excel.js 를 로드해야한다. 또한 iframe을 써줘야 ie에서 작동이된다.

excel exprort.zip


예제 파일이다.


https://github.com/rainabba/jquery-table2excel



jquery-table2excel-master.zip



위에 링크가 공식문서고 나는 아래에서 다운받아서 작업하엿기 때문에 둘다 링크를 남긴다



'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery - html 페이지 테이블 엑셀변환  (2) 2019.04.02
jQuery 란?  (0) 2019.02.27
제이쿼리의 기본문법  (0) 2019.02.27
jQuery - 속성 제어 api (JS의 ELEMENT와 이어짐)  (0) 2019.02.27
JQuery - NODE 객체  (0) 2019.02.27
  1. 2021.01.13 11:31

    비밀댓글입니다

  2. 오운현 2021.02.10 19:45

    열이 합쳐진 테이블은 변환시 에러가 발생합니다.

    해결 방법이 있을까요?

    좋은 글 잘보고 갑니다.


라이브러리 (jquery.com)

자주사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리 라고 한다.

CDN(Content Delivery Network)

제이쿼리 같은 JS 파일을 직접 로컬에 다운 받지 않고 웹주소 URL 로 통하여 클라이언트가 직접

접속해서 자원을 바로 전달해주는 URL 주소이다.

그냥 URL 주소를 넣으면 주소를 사용할수있다.

<script src="//code.jquery.com/jquery-1.11.0.min.js"> </script>

주소에 http 나 https 를 안붙인 이유는 접속자가

http 나 https 를 이용해서 들어오면 같은 프로토콜을 이용해서 접속하겠다는

상대적인 경로이다.

jquery가 2점대 이상은 IE 6,7,8 은 사용 불가하다.

jQuery

jQuery는 DOM을 내부에 감추고 보다 쉽게 웹 페이지를 조작할 수 있도록 돕는 도구이다.

DOM (Document Object Model)

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. 문서들을 객체를 사용하여 시각화 표시 한다고 생각하면된다.

웹페이지도 결국 하나의 문서이기 때문이다.

jQuery 는 javascript의 라이브러리 이다.

라이브러리지만 지금 안쓰는곳이 없다 할정도로

아주 많은 javascript 개발자들이 사용하고있다.

지금 이글을 작성한 지금도 react,view,agular 스펠링이 맞나 모르겠지만...

위 언급한 라이브러리 들이 커지고 있는상황이지만 그래도 아직까지

점유율은 jQuery가 가장 크다.

제이쿼리는 $ 로 시작한다

$ <-- 함수를 $의 변수로 저장한것

'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery - html 페이지 테이블 엑셀변환  (2) 2019.04.02
jQuery 란?  (0) 2019.02.27
제이쿼리의 기본문법  (0) 2019.02.27
jQuery - 속성 제어 api (JS의 ELEMENT와 이어짐)  (0) 2019.02.27
JQuery - NODE 객체  (0) 2019.02.27



$('li').css('color','red');

제이쿼리는 항상 $로 시작합니다

$ = jquery function 입니다. (제이쿼리 함수다)

$('css 선택자') <-- 대부분 어떤 element 의 css 선택자가 올지를 정한다 # id선택자 . class 선택자 그냥은 태그

$('li') <-- 는 제이쿼리 함수이다 (li 태그의 모든요소들을 객체로 객체로 바꾼결과

// $('li') 는 var object2 = (function() { return document.getElementsByTagName('li') });

약간 이런느낌??

chaining

$('li').css('color','red').css('textDecoration' , 'underline');

$('li')의 객체를 .css 프로퍼티로 전달햇는대 결국

$('li').css('color','red') 이것도 객체이기 때문에 .css 프로퍼티를 또 붙혀서 사용할수있다

이것을 chaining 라고한다.

내가 이렇게 선택한 엘리먼트 들을 연속적으로 또 메소드를 호출한다

html객체의 이름찾기

<body> <ol> <li name= 'name'>안녕하삼</li> <li id = 'active'>안녕하삼</li> <li class = 'class'>안녕하삼</li> <li>안녕하삼</li> <span id = 'act'>스판</span> </ol> <script> var li = document.getElementById('active'); console.log(li.constructor.name); // HTMLLIElement var li2 = document.getElementById('act'); console.log(li2.constructor.name); // HTMLSpanElement var lis = document.getElementsByTagName('li'); console.log(lis.constructor.name); // HTMLCollection </script> </body>

저렇게 id로 하나만 선택하는 것들은 HTML(엘리먼트이름)Element 가 나오고

Elements로 복수개를 선택하는 것들은 HTMLCollection 으로 나온다

HtmlCollection 은 유사배열이다.

DOM Tree

모든 엘리먼트는 HTMLElement의 자식이다.

따라서 HTMLElement의 프로퍼티를 똑같이 가지고 있다.

동시에 엘리먼트의 성격에 따라서 자신만의 프로퍼티를 가지고도 있는데, 이것은 성격에 따라서 달라진다.

HTMLElement 는 Element의 자식이고 Element는 Node의 자식이다.

Node는 Object의 자식이다.

이런 관계를 DOM Tree 라고 한다.



Dom Tree (이고잉 자바스크립트 출처) DOM Tree

jquery 객체

html collection 은 실시간으로 구조가 변경이된다.

제어대상찾기


'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery - html 페이지 테이블 엑셀변환  (2) 2019.04.02
jQuery 란?  (0) 2019.02.27
제이쿼리의 기본문법  (0) 2019.02.27
jQuery - 속성 제어 api (JS의 ELEMENT와 이어짐)  (0) 2019.02.27
JQuery - NODE 객체  (0) 2019.02.27

제이쿼리는 자바스크립트보다 보다 실용적이고 적은 코딩으로 작성하기 때문에 줄임말을 자주사용한다

setAttribute , getAttribute 에 대응 되는 jquery의 메소드는 attr이다.

$('t1').attr('checked'); // getAttribute 고

$('t1').attr('checked' , false); // setAttribute 이다

또한 removeAttribute 에 대응되는 jquery의 메소드는 remobeAttr 이다.

제이쿼리에 .attr 은 속성제어자 이고 .prop 는 프로퍼티방식 이다

t1.prop('href'); // 은 href 의 값을 가져오는 것이고 get

t1.prop('href','abcd'); // 는 t1.href = 'abcd' 와 같다

또 javascript 에서는 속성제어자와 프로퍼티방식이 미묘한 차이가 있다고 했지만

제이쿼리에서는 이것을 내부적으로 보완 해주기 때문에

$('#t1').prop('className' , 'important');

$('#t2').prop('class' , 'important');

는 내부적으로 보완해줘서 서로 같은결과를 나타낸다.

제이쿼리 하위엘리먼트 선택 (조회범위 제한)

<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> </head> <body> <ul> <li class="marked">html</li> <li>css</li> <li id="active">JavaScript <ul> <li>JavaScript Core</li> <li class="marked">DOM</li> <li class="marked">BOM</li> </ul> </li> </ul> <script> $(".marked","#active").css("background-color","red"); $("#active .marked").css("background-color","red"); //id값이 active 인 값중에 class가 marked 인 걸 red로 지정한다 $('#active').find('.marked').css("background-color","red"); //id값이 active 인 값중에 class가 marked 인 걸 찾아서 red로 지정한다 //위 3개의 구문은 같다고 봐도된다 $('#active').css('color','blue').find('.marked').css('background-color','red'); //id값이 active 인 값은 글씨 blue 로 그중에 클래스가 .marked인걸 찾아서 배경을 빨강 </script> </body> </html>


'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery - html 페이지 테이블 엑셀변환  (2) 2019.04.02
jQuery 란?  (0) 2019.02.27
제이쿼리의 기본문법  (0) 2019.02.27
jQuery - 속성 제어 api (JS의 ELEMENT와 이어짐)  (0) 2019.02.27
JQuery - NODE 객체  (0) 2019.02.27



<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="http://code.jquery.com/jquery.min.js"></script> </head> <body id = "body"> <ol id="ol"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li id='li4'><a href="#">4</a></li> </ol> <div id = 'ul'> <li id = 'target'>A</li> <li>B</li> <li>C</li> <li>D</li> </div> <script> //var ul = document.getElementById('ul'); $('#ul').prepend('프리펜드'); // ul 시작후 첫번쨰 노드에 $('#ul').append('어펜드'); // ul 시작후 마지막 노드에 $('#ul').before('비포'); // ul 노드 시작전에 $('#ul').after('에프터'); //ul 노드 끝난 후에 //만약 추가할 대상이 제쿼 객체라면 해당 엘리먼트가 지정된 api로 이동이된다 </script> </body> </html>

위 예제의 결과

제이쿼리 NODE의 REMOVE 와 EMPTY

REMOVE --> 선택된 엘리먼트만을 제거

EMPTY --> 선택된 엘리먼트의 텍스트만을 제거

$('#target').remove(); //타겟 엘리먼트를 제거 $('#target').empty(); // 타겟 엘리먼트의 들어있는 텍스트 노드만 제거

제이쿼리 NODE의 replaceWith와 replaceAll

replaceWith --> 제어대상을 먼저 지정

replaceAll --> 제어대상을 인자로 전달

clone --> 대상 복사

$('#target').replaceWith($('#source').clone); //인자가 앞에 있음 $('#source').clone().replaceAll('#target'); // 인자가 뒤에 있음


'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery - html 페이지 테이블 엑셀변환  (2) 2019.04.02
jQuery 란?  (0) 2019.02.27
제이쿼리의 기본문법  (0) 2019.02.27
jQuery - 속성 제어 api (JS의 ELEMENT와 이어짐)  (0) 2019.02.27
JQuery - NODE 객체  (0) 2019.02.27

+ Recent posts