背景：有個(gè)項(xiàng)目表單數(shù)據(jù)字段過多，為了方便快速添入數(shù)據(jù)需要將表格中的數(shù)據(jù)導(dǎo)入至表單中囤官，記錄下來厢破，方便以后查看。
所用插件：xlsx

一治拿、裝包 npm install xlsx --save

二摩泪、封裝插件

<template>
  <div>
    <input
      class="input-file"
      type="file"
      accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
      @change="exportData"
    >
    <button @click="btnClick">導(dǎo)入?yún)?shù)</button>
  </div>
</template>

<script>
import XLSX from 'xlsx';

export default {
  name: 'InputExcel',
  props: {
    accept: {
      type: String,
      default: '選擇excel文件'
    }
  },
  methods: {
    btnClick() {
      document.querySelector('.input-file').click();
    },
    exportData(event) {
      if (!event.currentTarget.files.length) {
        return;
      }
      const that = this;
      // 拿取文件對(duì)象
      var f = event.currentTarget.files[0];
      // 用FileReader來讀取
      var reader = new FileReader();
      // 重寫FileReader上的readAsBinaryString方法
      FileReader.prototype.readAsBinaryString = function(f) {
        var binary = '';
        var wb; // 讀取完成的數(shù)據(jù)
        var outdata; // 你需要的數(shù)據(jù)
        var reader = new FileReader();
        reader.onload = function(e) {
          // 讀取成Uint8Array，再轉(zhuǎn)換為Unicode編碼（Unicode占兩個(gè)字節(jié)）
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          // 接下來就是xlsx了劫谅，具體可看api
          wb = XLSX.read(binary, {
            type: 'binary'
          });
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
          // 自定義方法向父組件傳遞數(shù)據(jù)
          that.$emit('getResult', outdata);
        };
        reader.readAsArrayBuffer(f);
      };
      reader.readAsBinaryString(f);
    }
  }
};
</script>

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

三见坑、頁面中引用剛封裝的xlsx組件

<template>
  <div>
      <xlsx @getResult="getMyExcelData">導(dǎo)入?yún)?shù)</xlsx>
  </div>
</template>
<script>
import xlsx from '@/components/xlsx/xlsx';
export default {
  components: {
    xlsx
  },
  methods:{
      getMyExcelData(data) {
      // 處理你的數(shù)據(jù)
        console.log(data);
      }
   }
</script>