1:excel文件的导出原理:就是后端给前端返回一个URL地址,前端打开这个地址就可以了。
window.location.href = url (后端返回的url)
2: excel文件的导入 html部分和js部分 配合element的组件
// html 引用element里面的组件
<el-upload
class='image-uploader'
:multiple='false'
:auto-upload='true'
list-type='text'
:show-file-list='false'
:before-upload="beforeUpload"
action=''
:on-exceed="handleExceed"
:http-request="uploadFile" >
<el-button size="small" :loading="uploadLoading" icon="el-icon-upload2" type="primary">导入</el-button>
</el-upload>
// Js部分 文件上传前的判断和数量 上传文件之前的钩子
beforeUpload(file) {
this.uploadLoading = true
//判断文件格式
const isText = file.type === 'application/vnd.ms-excel'
const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
if (!(isText||isTextComputer)) {
this.openMessage('数据导入必须为excel文件xls或者xlsx格式','error')
this.uploadLoading =false
return false;
}
},
// 上传文件个数超过定义的数量
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件`);
},
//Js 最重要部分 上传文件,处理文件上传代码
uploadFile(item) {
console.log(item);
const fileObj = item.file;
// FormData 对象
const form = new FormData();
// 文件对象 这里像后端传参数,file是上传文件,其它是其它参数
form.append("file", fileObj);
form.append("importType", this.formData.importType);
form.append("importUserId", this.$store.getters.userId);
form.append("importUserName",this.$store.getters.name);
console.log(JSON.stringify(form));
// let formTwo = JSON.stringify(form)
importExcelAPI(form).then(response => {
this.openMessage("文件:" + fileObj.name + "导入成功",'success')
this.uploadLoading =false
this.getTableList()
}).catch(e=>{ this.uploadLoading =false });
},