Excel樣式

1.匯入

<script type="text/javascript" src="xlsx.core.min.js"></script>

或

yarn add xlsx
import XLSX from 'xlsx'

2.上傳本地檔案

const File = function () {
  var that;
  var obj = function () {
    that = this;

    window.addEventListener("load", that._init, false);
  }

  obj.prototype = {
    upload: function (options) {
      that._initByOptions(options);
      that.fileInput.click();
    },

    _initByOptions: function (options) {
      that.fileInput.value = "";
      that.options = {
        multi: false,
        url: "",
        accept: "",
        param: null,
        uploadType:'',
        before: function () {
        },
        after: function () {
        },
        progress: function () {
        }
      };

      if (options) {
        for (var i in options) {
          that.options[i] = options[i];
        }
      }

      // multiple
      if (that.options.multi) that.fileInput.setAttribute("multiple", "multiple");
      else that.fileInput.removeAttribute("multiple");

      // accept
      that.fileInput.setAttribute("accept", that.options.accept || "");
    },

    _init: function () {
      var ipt = document.createElement("input");
      ipt.style.display = "none";
      ipt.setAttribute("type", "file");
      ipt.addEventListener("change", that._fileChange, false);
      document.body.appendChild(ipt);

      that.fileInput = ipt;
    },

    _fileChange: function () {
      if (that.options.before) {
        var result = that.options.before(this.files);
        if (result == false) return;
      }

      for (var i = 0; i < this.files.length; i++) {
        that._uploadFile(this.files[i]);
      }
    },

    _uploadFile: function (file) {
      if(that.options.uploadType == 'local'){
        that.options.after && that.options.after(file);
        return;
      }
      var xhr = new XMLHttpRequest();

      xhr.upload.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
          that.options.progress && that.options.progress(evt.loaded / evt.total);
        } else {
          // No data to calculate on
        }
      }, false);

      xhr.addEventListener("load", function () {

      }, false);

      xhr.open("post", that.options.url);

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            that.options.after && that.options.after(xhr.responseText, file);
            xhr = null;
          }
        }
      }

      xhr.onerror = function () {
        that.options.error && that.options.error();
      }

      // Send the file (doh)
      if ("getAsBinary" in file) {
        //FF 3.5+
        xhr.sendAsBinary(file.getAsBinary());
      } else {
        var formData = new FormData();
        formData.append("path", "default");
        formData.append("upload_file", file);
        formData.append("type", file.name.substring(file.name.indexOf(".")));

        if (that.options.param) {
          for (var p in that.options.param) {
            formData.append(p, that.options.param[p]);
          }
        }

        if (me.global.token) {
          xhr.setRequestHeader('token', me.global.token)
        }
        xhr.send(formData);
      }
    }
  }

  return new obj();
};
export default File();

3.讀取Excel

function XLSXRender(data, accept, maxSize, callBack, maxCount) {
    File.upload({
      multi: true,
      accept: accept,
      uploadType: "local",
      before: function (files) {},
      after: function (file) {
        var reader = new FileReader();
        reader.onload = function (e) {
          var data = e.target.result;
          var workbook = XLSX.read(data, {type: 'binary'});
          var sheetNames = workbook.SheetNames; // 工作表名稱集合
          var worksheet = workbook.Sheets[sheetNames[0]]; // 這裡我們只讀取第一張sheet
          callBack && callBack(XLSX.utils.sheet_to_json(worksheet));
        };
        reader.readAsBinaryString(file);
      },
      error: function () {},
      progress: function () {}
    });
  }

4.生成echarts

XLSXRender({}, "image/jpg;image/jpeg;image/png;image/gif;image/bmp;", 500, function (data) {
	if (!data) return;
    var source = [];
    var a = {};
    for(let i in data){
      for(let key in data[i]) {
        if(!a[key])a[key] = [key]
        a[key].push(data[i][key])
      }
    }
    for(let i in a){
      source.push(a[i])
    }
    initData(source)
  })
  function initData(source){
	  const _data = document.getElementById("data");
	  const option = {
		legend: {},
		 tooltip: {},
		 dataset: {
		   source: source
		 },
		 xAxis: {type: 'category'},
		 yAxis: {},
		 series: [
		   {type: 'bar'},
		   {type: 'bar'},
		   {type: 'bar'}
		 ]
		}
	  if (!_data) {
	  	_data.setOption(option)
	  	return;
	  }
	  var _data = this.$echarts.init(_data)
	  _data.setOption(option)
	}