vue - Excel表格导入、导出组件

1、先安装了2个依赖：

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

2、在src目录下新建一个excel文件夹引入Blob.js和expor2Excal.js

Blob.js和expor2Excal.js //可网上下载

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

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

4、父组件引用子组件，通过点击将配置参数传给子组件 并 调用子组件内的导入、导出方法，
导入时通过$emit将处理过的json返给父组件，将json传给后端即可

//父组件
<template>
  <div class="excel">
    <div class="importExcel">
      <label for="upload">导入</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()">导出</div>
    <v-excel ref="excel" @importRequest="importRequest"></v-excel>
  </div>
</template>

<script>
  import VExcel from '@/components/Excel';
  export default {
    methods: {
      importExcel() { //导入
        let importData = {
          file: event.currentTarget.files[0], //导入时上传的文件
          tHeader: ['姓名', '年龄', '大小'], //表格头部名称
          filterVal: ['name', 'age', 'dx']  //数据库的字段名
        }
        this.$refs.excel.importExcel(importData);
      },
      importRequest(e) { //子组件返回的json表格数据，传给后端入库
        console.log(e)
      },
      exportExcel() { //导出
        let exportData = {
          title: "excel文件名", //导出的文件名
          data: [ //要导出的数据
            {contacts: '1',address: '2',department: '3'},
            {contacts: '5',address: '4',department: '6'}
          ],
          tHeader: ['联系人', '地址', '部门'], //要导出表格的头部名称
          filterVal: ['contacts', 'address', 'department'] //要导出的数据字段名
        }
        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; //是否将文件读取为二进制字符串
        var f = this.file;
        var reader = new FileReader();
        FileReader.prototype.readAsBinaryString = function(f) {
          var binary = "";
          var rABS = false; //是否将文件读取为二进制字符串
          var wb; //读取完成的数据
          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' }); //手动转化
            } 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表格数据传给父组件
          }
          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); //想要导出的数据
          export_json_to_excel(res.tHeader, data, res.title);
        });
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
      }
    }
  }
</script>