From ff13ee1f27fbf9f611d9d5f2a83d5400d2fae484 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Sat, 29 Sep 2018 13:23:00 +0800
Subject: [PATCH] feature[Excel]: support bookType option (#1144)
Documentation: https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html
---
src/vendor/Blob.js | 176 ------------------
src/vendor/Export2Excel.js | 8 +-
.../excel/components/AutoWidthOption.vue | 30 +++
src/views/excel/components/BookTypeOption.vue | 38 ++++
src/views/excel/components/FilenameOption.vue | 28 +++
src/views/excel/exportExcel.vue | 29 ++-
src/views/excel/selectExcel.vue | 3 +
7 files changed, 122 insertions(+), 190 deletions(-)
delete mode 100644 src/vendor/Blob.js
create mode 100644 src/views/excel/components/AutoWidthOption.vue
create mode 100644 src/views/excel/components/BookTypeOption.vue
create mode 100644 src/views/excel/components/FilenameOption.vue
diff --git a/src/vendor/Blob.js b/src/vendor/Blob.js
deleted file mode 100644
index 5e426dc2..00000000
--- a/src/vendor/Blob.js
+++ /dev/null
@@ -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));
diff --git a/src/vendor/Export2Excel.js b/src/vendor/Export2Excel.js
index 75f33ae1..ba956dc1 100644
--- 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
new file mode 100644
index 00000000..06aad430
--- /dev/null
+++ 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
new file mode 100644
index 00000000..9970b0e4
--- /dev/null
+++ 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
new file mode 100644
index 00000000..5cc931ad
--- /dev/null
+++ 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
index ae32b3aa..551b89f8 100644
--- 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
index 7e5366f4..2695bfb4 100644
--- 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"