表格打印
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
,则使用明确预定义的打印过滤和排序选项(printFilter
、printSortOrder
、printSortColumn
)。这些选项将应用于已由 UI 控件过滤和排序的数据。要按照 UI 上的过滤和排序打印数据,请不要设置这三个选项:printFilter
、printSortOrder
、printSortColumn
。 -
默认值:
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 "打印" }