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

Documentation: https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html
2018-09-29 13:23:00 +08:00 · 2018-09-29 13:23:00 +08:00 · f56385788c
parent 9563f2abe2
commit f56385788c
7 changed files with 122 additions and 190 deletions
--- a/src/vendor/Blob.js
+++ b/src/vendor/Blob.js
@ -1,176 +0,0 @@
-/* eslint-disable */
-/* Blob.js
- * A Blob implementation.
- * 2014-05-27
- *
- * By Eli Grey, http://eligrey.com
- * By Devin Samarin, https://github.com/eboyjr
- * License: X11/MIT
- *   See LICENSE.md
- */
-
-/*global self, unescape */
-/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
- plusplus: true */
-
-/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
-
-(function (view) {
-  "use strict";
-
-  view.URL = view.URL || view.webkitURL;
-
-  if (view.Blob && view.URL) {
-    try {
-      new Blob;
-      return;
-    } catch (e) {}
-  }
-
-  // Internally we use a BlobBuilder implementation to base Blob off of
-  // in order to support older browsers that only have BlobBuilder
-  var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function (view) {
-    var
-      get_class = function (object) {
-        return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
-      },
-      FakeBlobBuilder = function BlobBuilder() {
-        this.data = [];
-      },
-      FakeBlob = function Blob(data, type, encoding) {
-        this.data = data;
-        this.size = data.length;
-        this.type = type;
-        this.encoding = encoding;
-      },
-      FBB_proto = FakeBlobBuilder.prototype,
-      FB_proto = FakeBlob.prototype,
-      FileReaderSync = view.FileReaderSync,
-      FileException = function (type) {
-        this.code = this[this.name = type];
-      },
-      file_ex_codes = (
-        "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR " +
-        "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
-      ).split(" "),
-      file_ex_code = file_ex_codes.length,
-      real_URL = view.URL || view.webkitURL || view,
-      real_create_object_URL = real_URL.createObjectURL,
-      real_revoke_object_URL = real_URL.revokeObjectURL,
-      URL = real_URL,
-      btoa = view.btoa,
-      atob = view.atob
-
-      ,
-      ArrayBuffer = view.ArrayBuffer,
-      Uint8Array = view.Uint8Array;
-    FakeBlob.fake = FB_proto.fake = true;
-    while (file_ex_code--) {
-      FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
-    }
-    if (!real_URL.createObjectURL) {
-      URL = view.URL = {};
-    }
-    URL.createObjectURL = function (blob) {
-      var
-        type = blob.type,
-        data_URI_header;
-      if (type === null) {
-        type = "application/octet-stream";
-      }
-      if (blob instanceof FakeBlob) {
-        data_URI_header = "data:" + type;
-        if (blob.encoding === "base64") {
-          return data_URI_header + ";base64," + blob.data;
-        } else if (blob.encoding === "URI") {
-          return data_URI_header + "," + decodeURIComponent(blob.data);
-        }
-        if (btoa) {
-          return data_URI_header + ";base64," + btoa(blob.data);
-        } else {
-          return data_URI_header + "," + encodeURIComponent(blob.data);
-        }
-      } else if (real_create_object_URL) {
-        return real_create_object_URL.call(real_URL, blob);
-      }
-    };
-    URL.revokeObjectURL = function (object_URL) {
-      if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
-        real_revoke_object_URL.call(real_URL, object_URL);
-      }
-    };
-    FBB_proto.append = function (data /*, endings*/ ) {
-      var bb = this.data;
-      // decode data to a binary string
-      if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
-        var
-          str = "",
-          buf = new Uint8Array(data),
-          i = 0,
-          buf_len = buf.length;
-        for (; i < buf_len; i++) {
-          str += String.fromCharCode(buf[i]);
-        }
-        bb.push(str);
-      } else if (get_class(data) === "Blob" || get_class(data) === "File") {
-        if (FileReaderSync) {
-          var fr = new FileReaderSync;
-          bb.push(fr.readAsBinaryString(data));
-        } else {
-          // async FileReader won't work as BlobBuilder is sync
-          throw new FileException("NOT_READABLE_ERR");
-        }
-      } else if (data instanceof FakeBlob) {
-        if (data.encoding === "base64" && atob) {
-          bb.push(atob(data.data));
-        } else if (data.encoding === "URI") {
-          bb.push(decodeURIComponent(data.data));
-        } else if (data.encoding === "raw") {
-          bb.push(data.data);
-        }
-      } else {
-        if (typeof data !== "string") {
-          data += ""; // convert unsupported types to strings
-        }
-        // decode UTF-16 to binary string
-        bb.push(unescape(encodeURIComponent(data)));
-      }
-    };
-    FBB_proto.getBlob = function (type) {
-      if (!arguments.length) {
-        type = null;
-      }
-      return new FakeBlob(this.data.join(""), type, "raw");
-    };
-    FBB_proto.toString = function () {
-      return "[object BlobBuilder]";
-    };
-    FB_proto.slice = function (start, end, type) {
-      var args = arguments.length;
-      if (args < 3) {
-        type = null;
-      }
-      return new FakeBlob(
-        this.data.slice(start, args > 1 ? end : this.data.length), type, this.encoding
-      );
-    };
-    FB_proto.toString = function () {
-      return "[object Blob]";
-    };
-    FB_proto.close = function () {
-      this.size = this.data.length = 0;
-    };
-    return FakeBlobBuilder;
-  }(view));
-
-  view.Blob = function Blob(blobParts, options) {
-    var type = options ? (options.type || "") : "";
-    var builder = new BlobBuilder();
-    if (blobParts) {
-      for (var i = 0, len = blobParts.length; i < len; i++) {
-        builder.append(blobParts[i]);
-      }
-    }
-    return builder.getBlob(type);
-  };
-}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));
--- 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}`);
 }
--- 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>
--- 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>
--- 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>
--- 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
      })
--- 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"