vue中Excel文件的导入导出实现

首先了解Excel的导入导出实现效果，就是想要通过导入导出将所需要的数据进行合理的存放，那么下面了解一下导入导出实现的过程~~

Excel的导入

导入就是通过input有个file的属性来实现，并且导入想要实现的效果就是需要弹出一个面板控制导入的数据，以下是通过ElementUi组件来实现的

  //点击导入按钮
<el-tooltip class="item" effect="dark" content="导入Excel" placement="left">
 <el-button type="text" @click="importExcel" icon="el-icon-download"></el-button>
</el-tooltip>
 <ImportPointConfiguration ref="ImportWin" @ImportSuccess="ImportSuccess"></ImportPointConfiguration>                         
methods:{
	importExcel(){
	    this.$refs.ImportWin.setData();
	 },
}

//通过点击弹出的导入面板，主要内容
<el-form-item label="文件" prop="ValueType">
      <input id="file" type="file" class="file" >
 </el-form-item>
<el-button type="primary" @click="save" size="small">导 入</el-button>

methods:{
	save(){//点击导入
	   	let files= document.getElementById('file').files[0];//获取文件
            if(isEmpty(files)){       //判空处理        
                messageInfo("上传文件不能为空");                        
                return;
            }
            let isXlsx =  LimitAttach(files.name)//这里根据情况而定，是获取上传的文件名称后缀必须是xlsx
            if(isXlsx) {
                var form = new window.FormData();
                form.append("data", files);//将files的内容通过form传参给后端
                $.ajax({
                    url: '',//这里是后端路径url
                    type: "POST",
                    data: form,
                    async: true, //异步
                    processData: false, //很重要，告诉jquery不要对form进行处理
                    contentType: false, //很重要，指定为false才能形成正确的Content-Type
                    success: function (result) {                        
                        me.disabled = false
                        if(result === "Success"){
                            messageInfo("上传成功",'success');
                            this.$emit('ImportSuccess');
                            this.cancle();
                        } else {
                            this.$alert('<div>' + result + '</div>', '警告', {
                                dangerouslyUseHTMLString: true
                            });
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        var ResponseStatus = jqXHR.responseJSON.ResponseStatus
                        var Message = ResponseStatus.Message
                        this.$alert('<div>' + Message + '</div>', '警告', {
                            dangerouslyUseHTMLString: true
                        });                        
                        this.InitializationObj()//让之前上传的文件为空
                        return
                    }
                });
            } else {         
                this.InitializationObj()
                this.$message.error('只能上传xlsx 格式文件!');
            }
	 },
	InitializationObj(){//这个方法是想要让选择的文件为空
            this.disabled = false  
            var fileObj = document.getElementById('file');
            if(!isEmpty(fileObj)) {
                fileObj.value='';
            }
        }，
  LimitAttach(name) { 
		  var ext = name.slice(name.lastIndexOf(".")+1).toLowerCase();  
		  console.log(ext)
		  if ("xls" == ext || "xlsx" == ext) {
		    return true;  
		  }  
		  else {      
		    messageInfo("只能上传Excle文件");  
		    return false; 
		  }  
		}
}

Excel的导出

导出就是想要让文件在网页中将这部分数据下载至电脑上以excel的方式
跟导出的方法类似，最开始也是需要点击按钮弹出面板

  //点击导出按钮
<el-tooltip class="item" effect="dark" content="导出Excel" placement="left">
  <el-button type="text" @click="exportExcel" icon="el-icon-upload2"></el-button>
</el-tooltip>
<ExportSuccess ref="ExportWin" @ExportSuccess="ExportSuccess"></ExportSuccess>

                   
methods:{
	exportExcel(){
	    this.$refs.ExportWin.setData();
	 },
}

<el-form label-width="80px" :model="saveForm" >
    <el-form-item label="aaaaaa" prop="aaa">
        <Select ref="Select"></Select >
    </el-form-item>
</el-form>

 <el-button type="primary" @click="save" size="small">导 出</el-button>

data(){
	return{
		bootPATH: this.constants.baseURL, //是指本地localhost的路径
	}
}
methods:{
	if(!isEmpty(me.actionUrl)){
          let downloadUrl = this.bootPATH+ this.actionUrl + '?Id='+this.saveForm.Id;//actionUrl是值要获取的后端路径
           window.open(downloadUrl,'_blank'); // 新开窗口下载 
       }
        this.cancel();
}，
cancel() {
      this.$refs.Select.setValue('');
  },

总结一下，其实导出导入的实现前端做的并不是很多，很多功能都是后端实现的，但是前端实现的过程中也需要注意很多问题，
以上我所写的导入导出都是需要弹出面板，之后才进行导入导出，那么问题来了，为什么不直接导入导出呢
答：因为页面中的数据不可能只有一条，而导入导出所实现的就是通过Id去传入获取并且实现相应的功能，换句话说导入导出的数据只能是一条，所以就需要确定的一条数据的Id
所以在导入导出的时候Id是关键
所以在导出的时候才会出现一个下拉框，目的就是为了获取当前所选中的ID在数据传递的时候将Id传入，并获取相应的数据将其下载至桌面