Merge pull request #15 from njleonzhang/SimonZhangITer-dev

add csv export

Author: njleonzhang

example/docs/cn.vue

@@ -24,7 +24,8 @@
         :actions-def='getActionsDef()',
         :row-action-def='getRowActionsDef()',
         action-col-width='200'
-        @row-click='rowClick')
+        @row-click='rowClick'
+        ref='table1')
         el-table-column(prop='flow_no', label='服务编号', sortable='custom')
         el-table-column(prop='content', label='服务内容', sortable='custom')
         el-table-column(prop='create_time', label='服务时间', sortable='custom')
@@ -98,11 +99,16 @@
 
     el-card
       .desc
-        p 事件 (https://github.com/njleonzhang/vue-data-tables#event)
+        a(href='https://github.com/njleonzhang/vue-data-tables#event') 事件
         p 多数的事件都是对element-ui el-table事件的proxy
-        p filtered-data事件用于传递过滤后数据，配合alasql(https://github.com/agershun/alasql)等库使用可以实现导出excel等功能
+        p filtered-data事件用于传递过滤后数据，配合
+          a(href='https://github.com/zemirco/json2csv') json2csv
+          span 、
+          a(href='https://github.com/agershun/alasql') alasql
+          span 等库使用可以实现导出excel等功能
         data-tables(
           :data='tableData1',
+          :actions-def='getExportActionsDef()',
           :col-not-row-click='["special_selection_col"]',
           @row-click='rowClick',
           @select='handleSelect',
@@ -145,6 +151,7 @@
 <script>
 import DataTables from '../../src/index.js'
 import {cn} from '../mock'
+import CsvExport from '../utils/CsvExport'
 
 export default {
   name: 'app',
@@ -154,7 +161,9 @@ export default {
 
   data() {
     return {
-      tableData: []
+      tableData: [],
+      tableData1: [],
+      filteredData: []
     }
   },
 
@@ -185,6 +194,7 @@ export default {
         }]
       }
     },
+
     getCheckFilterDef() {
       return {
         width: 14,
@@ -225,6 +235,29 @@ export default {
         name: 'RUA'
       }]
     },
+
+    getExportActionsDef() {
+      let columns = ['room_no', 'cellphone', 'flow_no', 'state']
+      let columnNames = ['房号', '电话号码', '订单号', '状态']
+
+      return {
+        width: 19,
+        def: [{
+          name: 'export all',
+          handler: () => {
+            CsvExport(this.tableData1, columns, columnNames, '所有数据')
+          },
+          icon: 'plus'
+        }, {
+          name: 'export filtered',
+          handler: () => {
+            CsvExport(this.filteredData, columns, columnNames, '过滤后的数据')
+          },
+          icon: 'upload'
+        }]
+      }
+    },
+
     rowClick(row) {
       this.$message('row clicked')
       console.log('row clicked', row)
@@ -240,6 +273,7 @@ export default {
     },
     handleFilterDataChange(filteredData) {
       console.log('handleFilterDataChange', filteredData)
+      this.filteredData = filteredData
     },
     getSearchDef() {
       return {

example/docs/en.vue

@@ -103,11 +103,13 @@
         p most of the events is just a proxy for element-ui el-table.
         p filtered-data is special, which pass the filted data out the component.
         p you can export these data to excel by 3rd-party libs, such as:
+          a(href='https://github.com/zemirco/json2csv') json2csv
+          span 、
           a(href='https://github.com/agershun/alasql') alasql
 
         data-tables(
           :data='tableData1',
-          :col-not-row-click='["special_selection_col"]',
+          :actions-def='getExportActionsDef()',
           @row-click='rowClick',
           @select='handleSelect',
           @select-all='handleAllSelect',
@@ -152,6 +154,7 @@
 <script>
 import DataTables from '../../src/index.js'
 import {en} from '../mock'
+import CsvExport from '../utils/CsvExport'
 
 export default {
   name: 'app',
@@ -161,7 +164,9 @@ export default {
 
   data() {
     return {
-      tableData: []
+      tableData: [],
+      tableData1: [],
+      filteredData: []
     }
   },
 
@@ -232,6 +237,29 @@ export default {
         name: 'RUA'
       }]
     },
+
+    getExportActionsDef() {
+      let columns = ['room_no', 'cellphone', 'flow_no', 'state']
+      let columnNames = ['room NO.', 'Tel.', 'order No.', 'state']
+
+      return {
+        width: 19,
+        def: [{
+          name: 'export all',
+          handler: () => {
+            CsvExport(this.tableData1, columns, columnNames, 'all')
+          },
+          icon: 'plus'
+        }, {
+          name: 'export filtered',
+          handler: () => {
+            CsvExport(this.filteredData, columns, columnNames, 'filtered')
+          },
+          icon: 'upload'
+        }]
+      }
+    },
+
     rowClick(row) {
       this.$message('row clicked')
       console.log('row clicked', row)
@@ -247,6 +275,7 @@ export default {
     },
     handleFilterDataChange(filteredData) {
       console.log('handleFilterDataChange', filteredData)
+      this.filteredData = filteredData
     },
     getSearchDef() {
       return {

example/utils/CsvExport.js

@@ -0,0 +1,21 @@
+import json2csv from 'json2csv'
+
+export default (data, fields, fieldNames, fileName) => {
+  try {
+    var result = json2csv({
+      data: data,
+      fields: fields,
+      fieldNames: fieldNames
+    })
+    var csvContent = 'data:text/csvcharset=GBK,\uFEFF' + result
+    var encodedUri = encodeURI(csvContent)
+    var link = document.createElement('a')
+    link.setAttribute('href', encodedUri)
+    link.setAttribute('download', `${(fileName || 'file')}.csv`)
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  } catch (err) {
+    console.error(err)
+  }
+}

package.json

@@ -51,6 +51,7 @@
     "function-bind": "^1.0.2",
     "html-webpack-plugin": "^2.8.1",
     "http-proxy-middleware": "^0.17.2",
+    "json2csv": "^3.7.3",
     "json-loader": "^0.5.4",
     "node-sass": "^4.3.0",
     "opn": "^4.0.2",
@@ -73,4 +74,4 @@
     "node": ">= 4.0.0",
     "npm": ">= 3.0.0"
   }
-}
+}