1腌零、先安裝了2個依賴：

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

2、在src目錄下新建一個excel文件夾引入Blob.js和expor2Excal.js

Blob.js和expor2Excal.js //可網(wǎng)上下載

3唆阿、在main.js中全局引入：

import Blob from './excel/Blob.js'
import Export2Excel from './excel/Export2Excel.js'

4益涧、父組件引用子組件，通過點(diǎn)擊將配置參數(shù)傳給子組件 并 調(diào)用子組件內(nèi)的導(dǎo)入驯鳖、導(dǎo)出方法闲询，
導(dǎo)入時通過$emit將處理過的json返給父組件，將json傳給后端即可

//父組件
<template>
  <div class="excel">
    <div class="importExcel">
      <label for="upload">導(dǎo)入</label>
      <input id="upload" type="file" @change="importExcel()" 
        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" 
      />
    </div>
    <div class="exportExcel" @click="exportExcel()">導(dǎo)出</div>
    <v-excel ref="excel" @importRequest="importRequest"></v-excel>
  </div>
</template>

<script>
  import VExcel from '@/components/Excel';
  export default {
    methods: {
      importExcel() { //導(dǎo)入
        let importData = {
          file: event.currentTarget.files[0], //導(dǎo)入時上傳的文件
          tHeader: ['姓名', '年齡', '大小'], //表格頭部名稱
          filterVal: ['name', 'age', 'dx']  //數(shù)據(jù)庫的字段名
        }
        this.$refs.excel.importExcel(importData);
      },
      importRequest(e) { //子組件返回的json表格數(shù)據(jù)浅辙，傳給后端入庫
        console.log(e)
      },
      exportExcel() { //導(dǎo)出
        let exportData = {
          title: "excel文件名", //導(dǎo)出的文件名
          data: [ //要導(dǎo)出的數(shù)據(jù)
            {contacts: '1',address: '2',department: '3'},
            {contacts: '5',address: '4',department: '6'}
          ],
          tHeader: ['聯(lián)系人', '地址', '部門'], //要導(dǎo)出表格的頭部名稱
          filterVal: ['contacts', 'address', 'department'] //要導(dǎo)出的數(shù)據(jù)字段名
        }
        this.$refs.excel.exportExcel(exportData);
      }
    },
    components: {
      VExcel
    }
  }
</script>

<style scoped>
  .excel{
    width: 150px;
    display: flex;
    justify-content: space-between;
  }
  .importExcel label,.exportExcel{
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
  }
  .importExcel input{
    display: none;
  }
</style>

//子組件
<template>
  <div></div>
</template>

<script>
  export default {
    methods: {
      importExcel(res) {
        let that = this;
        this.file = res.file;
        var rABS = false; //是否將文件讀取為二進(jìn)制字符串
        var f = this.file;
        var reader = new FileReader();
        FileReader.prototype.readAsBinaryString = function(f) {
          var binary = "";
          var rABS = false; //是否將文件讀取為二進(jìn)制字符串
          var wb; //讀取完成的數(shù)據(jù)
          var outdata;
          var reader = new FileReader();
          reader.onload = function() {
            var bytes = new Uint8Array(reader.result);
            var length = bytes.byteLength;
            for(var i = 0; i < length; i++) {
              binary += String.fromCharCode(bytes[i]);
            }
            var XLSX = require('xlsx');
            if(rABS) {
              wb = XLSX.read(btoa(fixdata(binary)), { type: 'base64' }); //手動轉(zhuǎn)化
            } else {
              wb = XLSX.read(binary, { type: 'binary' });
            }
            outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
            let arr = [];
            outdata.map(v => {
              let obj = {};
              for (var i=0; i<res.tHeader.length; i++){
                obj[ res.filterVal[i] ] = v[ res.tHeader[i] ]
              }
              arr.push(obj);
            })
            that.$emit("importRequest",arr); //將處理好的json表格數(shù)據(jù)傳給父組件
          }
          reader.readAsArrayBuffer(f);
        }
        if(rABS) {
          reader.readAsArrayBuffer(f);
        } else {
          reader.readAsBinaryString(f);
        }
      },
      exportExcel(res) {
        require.ensure([], () => {
          const {export_json_to_excel} = require('@/excel/Export2Excel');//引入文件
          const data = this.formatJson(res.filterVal, res.data); //想要導(dǎo)出的數(shù)據(jù)
          export_json_to_excel(res.tHeader, data, res.title);
        });
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
      }
    }
  }
</script>