テーブル印刷

Bootstrap Tableのテーブル印刷拡張機能。カスタム印刷フォーマットをサポートします。

このページ

印刷拡張機能はテーブルツールバーに印刷ボタンを追加し、カスタム印刷スタイルとフォーマットをサポートし、ユーザーがテーブルデータを簡単に印刷できるようにします。

使用方法

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

例

オプション

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" }