From ff13ee1f27fbf9f611d9d5f2a83d5400d2fae484 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@
- - - - - True - False - - {{ $t('excel.export') }} Excel +
+ + + + {{ $t('excel.export') }} Excel + + Documentation + +
@@ -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('excel.selectedExport') }} + + Documentation +