GitHub에서 보기

테이블 인쇄

Bootstrap Table의 테이블 인쇄 확장 기능으로, 사용자 정의 인쇄 형식을 지원합니다.

이 페이지에서

인쇄 확장 기능은 테이블 도구 모음에 인쇄 버튼을 추가하며, 사용자 정의 인쇄 스타일과 형식을 지원하여 사용자가 테이블 데이터를 편리하게 인쇄할 수 있습니다.

사용법

<script src="extensions/print/bootstrap-table-print.js"></script>

예제

Print

옵션

showPrint

  • 속성: data-show-print

  • 유형: Boolean

  • 세부 정보:

    도구 모음에 인쇄 버튼을 표시할지 여부입니다. true로 설정하면 사용자가 인쇄 버튼을 클릭하여 테이블을 인쇄할 수 있습니다.

  • 기본값: false

printAsFilteredAndSortedOnUI

  • 속성: data-print-as-filtered-and-sorted-on-ui

  • 유형: Boolean

  • 세부 정보:

    true로 설정하면 현재 UI의 정렬 및 필터링 결과에 따라 인쇄합니다. 활성화된 경우 printFilter, printSortOrder, printSortColumn을 더 이상 설정하지 마세요. 그렇지 않으면 이러한 미리 설정은 UI에서 이미 필터링 및 정렬된 데이터에만 적용됩니다.

  • 기본값: true

printPageBuilder

  • 속성: data-print-page-builder

  • 유형: Function

  • 세부 정보:

    HTML <table> 요소 문자열을 매개변수로 받아 인쇄에 사용할 HTML 문자열을 반환하며, 스타일, 헤더 또는 푸터를 추가하는 데 사용할 수 있습니다.

  • 기본값:

printPageBuilder: function(table, styles) {
  return `
    <html>
    <head>
    ${styles}
    <style type="text/css" media="print">
    @page {
      size: auto;
      margin:25px 0 25px 0;
    }
    </style>
    <style type="text/css" media="all">
    table {
      border-collapse: collapse;
      font-size: 12px;
    }
    table, th, td {
      border:1px solid grey;
    }
    th, td {
      text-align: center;
      vertical-align: middle;
    }
    p {
      font-weight: bold;
      margin-left:20px;
    }
    table {
      width: 94%;
      margin-left: 3%;
      margin-right: 3%;
    }
    div.bs-table-print {
      text-align: center;
    }
    </style>
    </head>
    <title>Print Table</title>
    <body>
    <p>Printed on: ${new Date} </p>
    <div class="bs-table-print">${table}</div>
    </body>
    </html>
  `
}

printSortColumn

  • 속성: data-print-sort-column

  • 유형: String

  • 세부 정보:

    인쇄된 테이블을 정렬할 필드를 설정합니다.

  • 기본값: undefined

printSortOrder

  • 속성: data-print-sort-order

  • 유형: String

  • 세부 정보:

    printSortColumn이 설정된 경우에만 작동합니다. 'asc' 또는 'desc'를 선택할 수 있습니다.

  • 기본값: 'asc'

printStyles

  • 속성: data-print-styles

  • 유형: Array

  • 세부 정보:

    인쇄 페이지에 스타일 리소스를 추가합니다(예: 사용자 정의 아이콘).

  • 기본값: []

아이콘

  • print: 'fa-print'

열 옵션

printFilter

  • 속성: data-print-filter

  • 유형: String

  • 세부 정보:

    인쇄된 데이터에 이 열을 필터링할 때 사용할 필터 값을 설정합니다.

  • 기본값: undefined

printFormatter

  • 속성: data-print-formatter

  • 유형: Function

  • 세부 정보:

    사용자 정의 함수 function(value, row, index)로, 문자열을 반환하며 인쇄된 테이블의 셀 값을 형식화하는 데 사용됩니다. 동작은 열 옵션 formatter와 유사합니다.

  • 기본값: undefined

printIgnore

  • 속성: data-print-ignore

  • 유형: Boolean

  • 세부 정보:

    true로 설정하면 인쇄 페이지에서 이 열을 숨깁니다.

  • 기본값: false

현지화

formatPrint

  • 유형: Function

  • 기본값: function () { return "Print" }