vue excel的导入与模板下载

最近遇到个新需求，做excel导入，效果入下图

这边我把excel整成一个通用组件

<template>
    <div>
        <el-dialog class="excelBox" center :visible.sync="excelDialogVisible" width="60%" :title="titleName"  :before-close="close" :close-on-press-escape="false" :close-on-click-modal="false">
            
            <span class="remarkSpan">注：{{tip}}</span>
            <div class="btnBox">
                <cat-Form
                    class="excelDialog"
                    size='small'
                    labelWidth = 'auto' 
                    labelPosition='left'
                    :isInline="true"
                    :searchHandle="searchHandle"
                    :searchAliUpload="searchAliUpload">
                </cat-Form>
            </div>
            <cat-table
                id="excel"
                class="catTable excelTable"
                :columns="catTableData.columns"
                :list="catTableData.list">
            </cat-table>
        </el-dialog>
    </div>
</template>
<script>
import catForm from '@/components/common/form.vue'
import catTable from '@/components/common/table.vue'
import XLSX from 'xlsx'
import {mapGetters,mapActions} from 'vuex'
import FileSaver from 'file-saver';
export default {
    components:{catForm,catTable},
    computed:{
      ...mapGetters("projectData", {
        'projectDetailData':'projectDetailData',
      })
    },
    props:{
        excelDialogVisible:{
            type:Boolean,
            default:false
        },
        titleName:{
            type:String,
            defalult:''
        },
        tip:{
            type:String,
            default:'请先下载模板文件后进行导入，文件格式如下所示'
        },
        catTableData:{
            type:Object,
            default:()=>{}
        },
        downLoadUrl:{
            type:String,
            default:''
        }
    },
    data(){
        return{
            searchHandle:[
                {text:'模板下载',buttonType:'primary',handle:()=>this.downLoad(),class:'baseBtn'},
            ],
            searchAliUpload:[{type:'aliUpLoadNobig',prop:'uploadImg',label:'',handle:()=>this.upload,text:'导入'}],
            excelData:[]
        }
    },
    methods:{
        close:function(){
            this.$emit('close')
        },
        downLoad:function(){
            FileSaver.saveAs(this.downLoadUrl, this.titleName);
        },
        upload:function(param){
            // this.percentage=0
            this.fileResolve(param).then((res)=>{
                this.checkFile(res)
            })
        },
        // 文件解析
        fileResolve(param){
            let _this = this
            return new Promise((resolve,reject)=>{
                var files = param.file;
                var fileReader = new FileReader();
                fileReader.onload = function(ev) {
                    try {
                        var data = ev.target.result,
                            workbook = XLSX.read(data, {
                                type: 'binary'
                            }), // 以二进制流方式读取得到整份excel表格对象
                            persons = []; // 存储获取到的数据
                    } catch (param) {
                        _this.$message.error(`文件类型不正确`)
                        return;
                    }
                    // 表格的表格范围，可用于判断表头是否数量是否正确
                    var fromTo = '';
                    // 遍历每张表读取
                    for (var sheet in workbook.Sheets) {
                        if (workbook.Sheets.hasOwnProperty(sheet)) {
                            fromTo = workbook.Sheets[sheet]['!ref'];
                            persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                        }
                    }
                    return resolve(persons)
                };
                // 以二进制方式打开文件
                fileReader.readAsBinaryString(files);
            })
        },
        // 检查文件
        checkFile(res){
            this.excelData = []
            this.excelData=this.commonvariable.deepCloneArray(res)
            console.log('res',res)
            if(this.excelData.length===0){
                this.$message.error('上传的内容不能为空')
                return false
            }
            this.$emit('excelImport',this.excelData)
        }
    }
}

文件导入字段校验，并且把导入的内容获取里面的数据，然后转成后端需要的字段名称