소개

JQuery 플러그인 "TableExport"에서는 테이블을 Excel, CSV, 텍스트 파일 등으로 쉽게 출력할 수 있습니다. 다만, 출력 버튼의 위치는 상하로 고정스럽고 불편했으므로, 개선책을 비망록으로서 남겨 둡니다.

TableExport 자체의 사용법은 이 사이트을 알기 쉽기 때문에 참고하시기 바랍니다.

개발 환경은 다음과 같습니다.

Ruby 2.6.3

Rails 5.2.4.4

jQuery 1.12.4

(Ruby on Rails 사용하고 있습니다만, 이번 기사에서는 jQuery만 다루고 있으므로 별로 관계 없을까 생각합니다)

덧붙여 bootstrap를 사용하면 디폴트로 멋진 버튼으로 할 수 있습니다만 이번은 사용하지 않습니다.

문제점

Export to xlsx 버튼이 터무니없는 곳에 있네요.
보통의 테이블이라면 좀 더 낫지도 모르지만, 이 테이블은 표제 고정의 스크롤식으로, 테이블을 옆으로 슬라이드 하면 버튼도 함께 흘러 버리기 때문에 불필요하게 보기 어려운 대물이 되어 버립니다. .

일단 옵션으로 버튼의 위치를 ​​지정할 수 있습니다만, 전술한 바와 같이 상하의 지정 밖에 할 수 없기 때문에 개선에는 이르지 않았습니다.

$(".table").tableExport({
    ...
    position: "bottom",
    ...
});

해결책

매우 간단합니다.

①tableExport()로 생성되는 버튼을 숨기고 대리 버튼을 배치한다
②대리 버튼이 밀리면 trigger()에서도 원래의 버튼이 밀린 것으로 한다

html 파일

...

<table id="export-table">
    ...
</table>

<button type="button" id="export-btn">Excel出力</button>

...

jquery 파일

...

$('#export-table').tableExport({
    formats: ["xlsx"],
    bootstrap: false
});

$('#export-table caption').hide();

$('#export-btn').on('click', function(){
    $('.table caption button').trigger('click');  
});

...

잘 작동했습니다!
물론 CSV나 텍스트 파일의 출력에도 사용할 수 있습니다.

결론

TableExport는 매우 간단하게 외부 파일을 출력할 수 있는 플러그인입니다만, 취급하고 있는 기사 자체가 매우 적기 때문에, 이런 좀 작은 해결책이라고 하는 것은 좀더 늘어나면 기쁘네요.