首页 发现 帮助
登录
githab
/
bootstrap-table
2
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

Merge pull request #7238 from wenzhixin/fix/6038

Added printStyles option to print extension
文翼 1 年之前
父节点
3f18df6de0 a2f9975354
当前提交
83ce6f9157
共有 2 个文件被更改，包括 53 次插入 和 21 次删除
分列视图 显示文件统计
  1. 25 12
      site/docs/extensions/print.md
  2. 28 9
      src/extensions/print/bootstrap-table-print.js

+ 25 - 12
site/docs/extensions/print.md
查看文件 

@@ -6,7 +6,7 @@ group: extensions
 
 toc: true
 
 ---
 
 
-Adds a button to the toolbar for printing the table in a predefined configurable format.
 
+Adds a button to the toolbar to print the table in a predefined configurable format.
 
 
 ## Usage
 
 
@@ -28,7 +28,7 @@ Adds a button to the toolbar for printing the table in a predefined configurable
 
 
 - **Detail:**
 
 
-  Set true to show the Print button on the toolbar.
 
+  Set `true` to show the Print button on the toolbar.
 
 
 - **Default:** `false`
 
 
@@ -40,7 +40,7 @@ Adds a button to the toolbar for printing the table in a predefined configurable
 
 
 - **Detail:**
 
 
-  When true - print table as sorted and filtered on UI. Please note that if true is set, along with explicit predefined print options for filtering and sorting (printFilter, printSortOrder, printSortColumn)- then they will be applied on data already filtered and sorted by UI controls. For printing data as filtered and sorted on UI - do not set these 3 options: printFilter, printSortOrder, printSortColumn
 
+  Set `true` to print table as sorted and filtered on UI. If `true` is set, explicit predefined print options for filtering and sorting (`printFilter`, `printSortOrder`, `printSortColumn`). They will be applied to data already filtered and sorted by UI controls. For printing data as filtered and sorted on UI - do not set these three options: `printFilter`, `printSortOrder`, `printSortColumn`.
 
 
 - **Default:** `true`
 
 
@@ -52,14 +52,15 @@ Adds a button to the toolbar for printing the table in a predefined configurable
 
 
 - **Detail:**
 
 
-  Receive html `<table>` element as string parameter, returns html string for printing. Used for styling and adding header or footer.
 
+  Receive HTML `<table>` element as a string parameter, returns HTML string for printing. This option is used for styling and adding a header or footer.
 
 
 - **Default:**
 
 {% highlight javascript %}
 
-printPageBuilder: function(table) {
 
+printPageBuilder: function(table, styles) {
 
   return `
 
     <html>
 
     <head>
 
+    ${styles}
 
     <style type="text/css" media="print">
 
     @page {
 
       size: auto;
 
@@ -88,7 +89,7 @@ printPageBuilder: function(table) {
 
       margin-right: 3%;
 
     }
 
     div.bs-table-print {
 
-      text-align:center;
 
+      text-align: center;
 
     }
 
     </style>
 
     </head>
 
@@ -110,7 +111,7 @@ printPageBuilder: function(table) {
 
 
 - **Detail:**
 
 
-  set column field name to sort by for the printed table
 
+  Set column field name to sort by for the printed table.
 
 
 - **Default:** `undefined`
 
 
@@ -122,13 +123,25 @@ printPageBuilder: function(table) {
 
 
 - **Detail:**
 
 
-  Valid values: 'asc', 'desc'. Relevant only if printSortColumn is set
 
+  Valid values: 'asc', 'desc'. Relevant only if `printSortColumn` is set.
 
 
 - **Default:** `'asc'`
 
 
+### printStyles
 
+
 
+- **attribute:** `data-print-styles`
 
+
 
+- **type:** `Array`
 
+
 
+- **Detail:**
 
+
 
+  Add styles to the printed page, such as custom icons.
 
+
 
+- **Default:** `[]`
 
+
 
 ### Icons
 
 
-* print: `'glyphicon-print icon-share'`
 
+* print: `'fa-print'`
 
 
 ## Column options
 
 
@@ -140,7 +153,7 @@ printPageBuilder: function(table) {
 
 
 - **Detail:**
 
 
-  set value to filter the printed data by this column.
 
+  Set the value to filter the printed data by this column.
 
 
 - **Default:** `undefined`
 
 
@@ -152,7 +165,7 @@ printPageBuilder: function(table) {
 
 
 - **Detail:**
 
 
-  function(value, row, index) - returns a string. Formats the cell values for this column in the printed table. Function behavior is similar to the 'formatter' column option
 
+  A custom `function(value, row, index)` - returns a string. Formats the cell values for this column in the printed table. Function behavior is similar to the 'formatter' column option.
 
 
 - **Default:** `undefined`
 
 
@@ -164,7 +177,7 @@ printPageBuilder: function(table) {
 
 
 - **Detail:**
 
 
-  set true to hide this column in the printed page.
 
+  Set `true` to hide this column on the printed page.
 
 
 - **Default:** `false`

+ 28 - 9
src/extensions/print/bootstrap-table-print.js
查看文件 

@@ -4,10 +4,11 @@
 
 
 const Utils = $.fn.bootstrapTable.utils
 
 
-function printPageBuilderDefault (table) {
 
+function printPageBuilderDefault (table, styles) {
 
   return `
 
     <html>
 
     <head>
 
+    ${styles}
 
     <style type="text/css" media="print">
 
     @page {
 
       size: auto;
 
@@ -36,7 +37,7 @@ function printPageBuilderDefault (table) {
 
       margin-right: 3%;
 
     }
 
     div.bs-table-print {
 
-      text-align:center;
 
+      text-align: center;
 
     }
 
     </style>
 
     </head>
 
@@ -61,8 +62,9 @@ Object.assign($.fn.bootstrapTable.defaults, {
 
   printAsFilteredAndSortedOnUI: true,
 
   printSortColumn: undefined,
 
   printSortOrder: 'asc',
 
-  printPageBuilder (table) {
 
-    return printPageBuilderDefault(table)
 
+  printStyles: [],
 
+  printPageBuilder (table, styles) {
 
+    return printPageBuilderDefault(table, styles)
 
   }
 
 })
 
 
@@ -281,13 +283,30 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
     data = sortRows(data, this.options.printSortColumn, this.options.printSortOrder)
 
     const table = buildTable(data, this.options.columns)
 
     const newWin = window.open('')
 
-
 
-    const calculatedPrintPage = Utils.calculateObjectValue(this, this.options.printPageBuilder, [table], printPageBuilderDefault(table))
 
+    const printStyles = typeof this.options.printStyles === 'string' ?
 
+      this.options.printStyles.replace(/\[|\]| /g, '').toLowerCase().split(',') :
 
+      this.options.printStyles
 
+    const styles = printStyles.map(it =>
 
+      `<link rel="stylesheet" href="${it}" />`).join('')
 
+
 
+    const calculatedPrintPage = Utils.calculateObjectValue(this, this.options.printPageBuilder,
 
+      [table, styles], printPageBuilderDefault(table, styles))
 
+    const startPrint = () => {
 
+      newWin.focus()
 
+      newWin.print()
 
+      newWin.close()
 
+    }
 
 
     newWin.document.write(calculatedPrintPage)
 
     newWin.document.close()
 
-    newWin.focus()
 
-    newWin.print()
 
-    newWin.close()
 
+
 
+    if (printStyles.length) {
 
+      const links = document.getElementsByTagName('link')
 
+      const lastLink = links[links.length - 1]
 
+
 
+      lastLink.onload = startPrint
 
+    } else {
 
+      startPrint()
 
+    }
 
   }
 
 }