View on GitHub

表格打印

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 上的排序和过滤打印表格。如果设置为 true,则使用明确预定义的打印过滤和排序选项(printFilterprintSortOrderprintSortColumn)。这些选项将应用于已由 UI 控件过滤和排序的数据。要按照 UI 上的过滤和排序打印数据,请不要设置这三个选项:printFilterprintSortOrderprintSortColumn

  • 默认值: 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

  • 详情:

    有效值:’asc’(升序)、’desc’(降序)。仅在设置了 printSortColumn 时相关。

  • 默认值: '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 "打印" }