perf[excel]: refactor excel (#536)

src/vendor/Export2Excel.js

@@ -116,16 +116,14 @@ export function export_table_to_excel(id) {
     saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
 }
 
-export function export_json_to_excel(th, jsonData, defaultTitle) {
-
+export function export_json_to_excel({header, data, filename='excel-list', autoWidth=true}={}) {
     /* original data */
-
-    var data = jsonData;
-    data.unshift(th);
+    data=[...data]
+    data.unshift(header);
     var ws_name = "SheetJS";
-
     var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
 
+    if(autoWidth){
       /*设置worksheet每列的最大宽度*/
       const colWidth = data.map(row => row.map(val => {
         /*先判断是否为null/undefined*/
@@ -149,12 +147,12 @@ export function export_json_to_excel(th, jsonData, defaultTitle) {
         }
       }
       ws['!cols'] = result;
+    }
 
     /* add worksheet to workbook */
     wb.SheetNames.push(ws_name);
     wb.Sheets[ws_name] = ws;
 
     var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
-    var title = defaultTitle || 'excel-list'
-    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
+    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), filename + ".xlsx");
 }

src/views/excel/exportExcel.vue

@@ -1,8 +1,16 @@
 <template>
   <!-- $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 style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
-    <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
+    <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 style='margin:0 0 20px 20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
+
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
       <el-table-column align="center" label='Id' width="95">
         <template slot-scope="scope">
@@ -45,7 +53,8 @@ export default {
       list: null,
       listLoading: true,
       downloadLoading: false,
-      filename: ''
+      filename: '',
+      autoWidth: true
     }
   },
   created() {
@@ -66,7 +75,12 @@ export default {
         const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
         const list = this.list
         const data = this.formatJson(filterVal, list)
-        excel.export_json_to_excel(tHeader, data, this.filename)
+        excel.export_json_to_excel({
+          header: tHeader,
+          data,
+          filename: this.filename,
+          autoWidth: this.autoWidth
+        })
         this.downloadLoading = false
       })
     },
@@ -82,3 +96,13 @@ export default {
   }
 }
 </script>
+
+<style>
+.radio-label {
+  font-size: 14px;
+  color: #606266;
+  line-height: 40px;
+  padding: 0 12px 0 30px;
+}
+</style>
+

src/views/excel/selectExcel.vue

@@ -72,7 +72,11 @@ export default {
           const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
           const list = this.multipleSelection
           const data = this.formatJson(filterVal, list)
-          excel.export_json_to_excel(tHeader, data, this.filename)
+          excel.export_json_to_excel({
+            header: tHeader,
+            data,
+            filename: this.filename
+          })
           this.$refs.multipleTable.clearSelection()
           this.downloadLoading = false
         })