首先了解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传入,并获取相应的数据将其下载至桌面