Vue自定义组件封装及使用Excel

一、js-xlsx 组件安装

	npm install xlsx --save
	npm install -S file-saver
	npm install -D script-loader

二、 创建vue组件

在项目根目录 src\components下创建 importExcel.vue 文件
importExcel.vue 文件代码：

<template>
  <span style="margin-right:10px">
    <input
      class="input-file"
      type="file"
      @change="exportData"
      accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
    />
    <el-button :loading="btnLoading" size="medium" type="primary" icon="el-icon-upload" @click="selectFile">上传Excel</el-button>
  </span>
</template>

<script>

// 引入组件
import XLSX from "xlsx";
export default {
     
  data() {
     
    return {
     
      btnLoading: false,
    };
  },
  methods: {
     

    // 选择文件
    selectFile() {
     
      this.btnLoading = true;
      document.querySelector(".input-file").click();
    },

    // 导出xml数据
    exportData(event) {
     
      if (!event.currentTarget.files.length) {
     
        this.btnLoading = false;
        return;
      }
      const that = this;
      // 拿取文件对象
      var f = event.currentTarget.files[0];
      // 用FileReader来读取
      var reader = new FileReader();
      // 重写FileReader上的readAsBinaryString方法
      FileReader.prototype.readAsBinaryString = function(f) {
     
        var binary = "";
        var wb; // 读取完成的数据
        var outdata; // 需要导出的数据
        var reader = new FileReader();
        reader.onload = function() {
     
          // 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
     
            binary += String.fromCharCode(bytes[i]);
          }
          // 接下来就是xlsx了，具体可看api https://www.npmjs.com/package/xlsx
          wb = XLSX.read(binary, {
     
            type: "binary"
          });
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
          that.btnLoading = false;
          // 自定义方法向父组件传递数据
          that.$emit("getResult", outdata);
        };
        reader.readAsArrayBuffer(f);
      };
      reader.readAsBinaryString(f);
    }
  }
};
</script>

<style>
.input-file {
     
  display: none;
}
</style>

三、使用

在需要的vue文件使用

<template>
  <div>
    <import-excel @getResult="getMyExcelData" />
  </div>
</template>
<script>

// 引入自定义组件
import importExcel from "@/components/importExcel.vue";
export default {
     
  data() {
     
    return {
     };
  },
  components: {
     
    // 注册自定义组件
    importExcel
  },
  methods: {
     
    getMyExcelData(data) {
     
      // data 为读取的excel数据，在这里进行数据处理
      console.log(data);
    }
  }
};
</script>

四、效果图