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 的排序與過濾結果打印。若啟用,請不要再設置 printFilterprintSortOrderprintSortColumn,否則這些預設只會應用於已經在 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" }