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