Vue-xlsx-excel文件导出折腾小记

前沿

---

最近再写vue-element-ui-pc项目中需要把数据导出为excel的需求，于是乎就开始折腾呗，没办法，谁让之前没有写过vue的导出数据呢，不折腾的攻城狮跟病猫有什么区别，不多说了，上思路与代码。

好在折腾了两天发现了js-xlsx这个东东，一个功能很强大excel处理库，只是下载各种格式excel，还支持读取excel，于是我就借鉴官网的例子搞了一下，其实原理我也不太懂，只是在使用造好的轮子而已。

写在开始，在本插件中需要注意到的几个地方

以下为需要用到的插件库
npm install file-saver@1.3.3     用来保存文件的
npm install --save-dev script-loader   由于由于这几个文件不支持import引入，所以我们需要`script-loader`来将他们挂载到全局环境下。
npm install xlsx   //就是上边提到的js-xlsx这个东东
npm install jszip  //导出为压缩文件或者是将文件压缩

Step 一

首先，先创建一个公共文件夹，里边存放封装的公共的导出的js,这里起名为vendor,里边放三个封装好的文件，分别为

1，Blog.js

//Blog.js官网写好的，直接用就好了，主要是用来转二进制用的。
/* eslint-disable */
(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