웹 애플리케이션에서 테이블을 사용할 때, 데이터를 쉽게 정렬하고 필터링하는 것이 중요합니다. jQuery 플러그인 중 하나인 TableSorter는 이러한 기능을 쉽게 구현할 수 있게 해줍니다. 이번에는 TableSorter와 jsPDF 라이브러리를 활용하여 테이블의 특정 셀을 PDF로 다운로드하는 기능을 추가하는 방법에 대해 살펴보겠습니다.

TableSorter와 jsPDF 라이브러리 설치

먼저 TableSorter와 jsPDF 라이브러리를 설치해야 합니다. 이를 위해 다음과 같이 CDN을 이용하여 각 라이브러리를 추가합니다.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- TableSorter -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.0.5/css/theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.0.5/js/jquery.tablesorter.min.js"></script>

<!-- jsPDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>

테이블에 PDF 다운로드 버튼 추가하기

이제 TableSorter로 정렬된 테이블에 PDF 다운로드 버튼을 추가해보겠습니다. 테이블의 각 행에 있는 “다운로드” 버튼을 클릭할 때 해당 행의 데이터를 PDF로 저장하는 기능을 구현할 것입니다.

// TableSorter 초기화
$("#myTable").tablesorter();

// PDF 다운로드 버튼 클릭 이벤트
$("#myTable").on("click", ".download-btn", function() {
    // 선택된 행의 데이터 가져오기
    let rowData = $(this).closest("tr").find("td").map(function() {
        return $(this).text();
    }).get();
    
    // PDF 생성 및 다운로드
    let doc = new jsPDF();
    doc.text(rowData.join(", "), 10, 10);
    doc.save("table_data.pdf");
});

결론

이제 테이블의 각 행에 추가된 “다운로드” 버튼을 클릭하면 해당 행의 데이터를 PDF로 다운로드할 수 있게 되었습니다. TableSorter와 jsPDF를 활용하여 테이블을 보다 유용하게 활용할 수 있는 다양한 기능을 추가할 수 있습니다.

이상으로 TableSorter를 이용한 테이블의 셀에 PDF 다운로드 기능을 추가하는 방법에 대해 살펴보았습니다.

참고 문헌:

• TableSorter 공식 문서
• jsPDF 공식 GitHub 저장소