feature[Excel]: support bookType option (#1144)

Documentation: https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html
PanJiaChen · Oct 8, 2018 · f563857 · f563857
1 parent 9563f2a
commit f563857
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 190 deletions.
diff --git a/src/vendor/Blob.js b/src/vendor/Blob.js
diff --git a/src/vendor/Export2Excel.js b/src/vendor/Export2Excel.js
@@ -1,6 +1,5 @@
 /* eslint-disable */
 require('script-loader!file-saver');
-require('script-loader!@/vendor/Blob');
 import XLSX from 'xlsx'
 
 function generateArray(table) {
@@ -149,7 +148,8 @@ export function export_json_to_excel({
   header,
   data,
   filename,
-  autoWidth = true
+  autoWidth = true,
+  bookType=  'xlsx'
 } = {}) {
   /* original data */
   filename = filename || 'excel-list'
@@ -196,11 +196,11 @@ export function export_json_to_excel({
   wb.Sheets[ws_name] = ws;
 
   var wbout = XLSX.write(wb, {
-    bookType: 'xlsx',
+    bookType: bookType,
     bookSST: false,
     type: 'binary'
   });
   saveAs(new Blob([s2ab(wbout)], {
     type: "application/octet-stream"
-  }), filename + ".xlsx");
+  }), `${filename}.${bookType}`);
 }
diff --git a/src/views/excel/components/AutoWidthOption.vue b/src/views/excel/components/AutoWidthOption.vue
@@ -0,0 +1,30 @@
+<template>
+  <div style="display:inline-block;">
+    <label class="radio-label">Cell Auto-Width: </label>
+    <el-radio-group v-model="autoWidth">
+      <el-radio :label="true" border>True</el-radio>
+      <el-radio :label="false" border>False</el-radio>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    autoWidth: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/excel/components/BookTypeOption.vue b/src/views/excel/components/BookTypeOption.vue
@@ -0,0 +1,38 @@
+<template>
+  <div style="display:inline-block;">
+    <label class="radio-label">Book Type: </label>
+    <el-select v-model="bookType" style="width:120px;" >
+      <el-option
+        v-for="item in options"
+        :key="item"
+        :label="item"
+        :value="item"/>
+    </el-select>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: 'xlsx'
+    }
+  },
+  data() {
+    return {
+      options: ['xlsx', 'csv', 'txt']
+    }
+  },
+  computed: {
+    bookType: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/excel/components/FilenameOption.vue b/src/views/excel/components/FilenameOption.vue
@@ -0,0 +1,28 @@
+<template>
+  <div style="display:inline-block;">
+    <!-- $t is vue-i18n global function to translate lang -->
+    <label class="radio-label" style="padding-left:0;">Filename: </label>
+    <el-input :placeholder="$t('excel.placeholder')" v-model="filename" style="width:340px;" prefix-icon="el-icon-document"/>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    filename: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/excel/exportExcel.vue b/src/views/excel/exportExcel.vue
@@ -2,14 +2,15 @@
   <!-- $t is vue-i18n global function to translate lang -->
   <div class="app-container">
 
-    <label class="radio-label" style="padding-left:0;">Filename: </label>
-    <el-input :placeholder="$t('excel.placeholder')" v-model="filename" style="width:340px;" prefix-icon="el-icon-document"/>
-    <label class="radio-label">Cell Auto-Width: </label>
-    <el-radio-group v-model="autoWidth">
-      <el-radio :label="true" border>True</el-radio>
-      <el-radio :label="false" border>False</el-radio>
-    </el-radio-group>
-    <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">{{ $t('excel.export') }} Excel</el-button>
+    <div>
+      <FilenameOption v-model="filename" />
+      <AutoWidthOption v-model="autoWidth" />
+      <BookTypeOption v-model="bookType" />
+      <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">{{ $t('excel.export') }} Excel</el-button>
+      <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
+        <el-tag type="info">Documentation</el-tag>
+      </a>
+    </div>
 
     <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
       <el-table-column align="center" label="Id" width="95">
@@ -46,15 +47,22 @@
 import { fetchList } from '@/api/article'
 import { parseTime } from '@/utils'
 
+// options components
+import FilenameOption from './components/FilenameOption'
+import AutoWidthOption from './components/AutoWidthOption'
+import BookTypeOption from './components/BookTypeOption'
+
 export default {
   name: 'ExportExcel',
+  components: { FilenameOption, AutoWidthOption, BookTypeOption },
   data() {
     return {
       list: null,
       listLoading: true,
       downloadLoading: false,
       filename: '',
-      autoWidth: true
+      autoWidth: true,
+      bookType: 'xlsx'
     }
   },
   created() {
@@ -79,7 +87,8 @@ export default {
           header: tHeader,
           data,
           filename: this.filename,
-          autoWidth: this.autoWidth
+          autoWidth: this.autoWidth,
+          bookType: this.bookType
         })
         this.downloadLoading = false
       })

diff --git a/src/views/excel/selectExcel.vue b/src/views/excel/selectExcel.vue
@@ -3,6 +3,9 @@
     <!-- $t is vue-i18n global function to translate lang -->
     <el-input :placeholder="$t('excel.placeholder')" v-model="filename" style="width:340px;" prefix-icon="el-icon-document"/>
     <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">{{ $t('excel.selectedExport') }}</el-button>
+    <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
+      <el-tag type="info">Documentation</el-tag>
+    </a>
     <el-table
       v-loading="listLoading"
       ref="multipleTable"