Bootstrap

vue将数据导出到excel

vue将数据导出到excel

最近做vue项目使用到导出数据到excel的功能,就想着在这里记录一下,就当是一个笔记

在vue项目中导出数据到excel
第一步安装依赖

cnpm install file-saver
cnpm install xlsx
cnpm install script-loader

第二步在src文件夹下新建一个文件夹来存放Blob.js和Export2Excel.js,这两个文件夹是用来将数据导出excel的
Blob.js

/* 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
;