vue+elementUI导入excel功能
导出效果图第一步模板下载<el-link href="src/template/xxx.xlsx" style="margin-left: 8px;"><el-button type="primary">模板下载</el-button></el-link>第二步:导入导入控件<el-...
·
导出效果图
第一步模板下载
<el-link href="src/template/xxx.xlsx" style="margin-left: 8px;">
<el-button type="primary">模板下载</el-button>
</el-link>
第二步:导入
导入控件
<el-upload style="margin-left: 8px;"
class="upload-demo inline-block margin-right-10"
action=""
:on-change="handleChange"
:show-file-list="false"
:on-remove="handleRemove"
:file-list="fileListUpload"
:limit="limitUpload"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
:auto-upload="false">
<el-button type="primary">导入</el-button>
</el-upload>
导入方法(excel表上传)
// excel表上传
handleChange(file, fileList) {
this.fileTemp = file.raw
let fileName = file.raw.name
let fileType = fileName.substring(fileName.lastIndexOf('.') + 1);
// 判断上传文件格式
if (this.fileTemp) {
if ((fileType == 'xlsx') || (fileType == 'xls')) {
this.importf(this.fileTemp)
} else {
this.$message({
type: 'warning',
message: '附件格式错误,请删除后重新上传!'
})
}
} else {
this.$message({
type: 'warning',
message: '请上传附件!'
})
}
},
导入方法(excel表上传)
// excel表上传
handleChange(file, fileList) {
this.fileTemp = file.raw
let fileName = file.raw.name
let fileType = fileName.substring(fileName.lastIndexOf('.') + 1);
// 判断上传文件格式
if (this.fileTemp) {
if ((fileType == 'xlsx') || (fileType == 'xls')) {
this.importf(this.fileTemp)
} else {
this.$message({
type: 'warning',
message: '附件格式错误,请删除后重新上传!'
})
}
} else {
this.$message({
type: 'warning',
message: '请上传附件!'
})
}
},
导入方法(移除excel表)
// 移除excel表
handleRemove(file, fileList) {
this.fileTemp = null
}
fileListUpload: [],
limitUpload: 3,
disabled: false,
accountList:[],
导入确认弹窗
导入确认弹窗代码
<el-dialog
title="导入数据(XXX)"
:visible.sync="dialogVisible"
width="60%"
:before-close="handleClose"
center>
<el-table
:data="accountList"
border
style="width: 100%;">
<el-table-column
prop="xxx"
header-align="center"
align="center"
label="XXX">
</el-table-column>
<el-table-column
prop="xxx"
header-align="center"
align="center"
label="XXX">
</el-table-column>
<el-table-column
prop="xxx"
header-align="center"
align="center"
label="XXX">
</el-table-column>
<el-table-column
prop="xxx"
header-align="center"
align="center"
label="XXX">
</el-table-column>
<el-table-column
prop="xxx"
header-align="center"
align="center"
label="XXX">
</el-table-column>
<el-table-column
prop="xxx"
header-align="center"
align="center"
label="XXX">
</el-table-column>
<el-table-column
prop="xxx"
header-align="center"
align="center"
label="XXX">
</el-table-column>
<el-table-column
prop="xxx"
header-align="center"
align="center"
label="XXX">
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="importExcel()">确 定</el-button>
</span>
</el-dialog>
点击确认执行的方法
importExcel(){
this.$http({
url: XXXX',
method: 'post',
data: this.accountList
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500
})
this.getDataList()
}
})
this.dialogVisible = false;
}
后台接口定义
@RequestMapping("/XXXl")
public RestResponse importExcelXXX(@RequestBody List<xxx> businessRiskManageEntities) {
xxx.importExcelXX(xxx);
return RestResponse.success();
}
点击取消执行的方法
handleClose(done) {
this.dialogVisible = false;
},
导入的方法
//导入的方法
importf(obj) {
this.dialogVisible = true;
let _this = this;
let inputDOM = this.$refs.inputer; // 通过DOM取文件数据
this.file = event.currentTarget.files[0];
var rABS = false; //是否将文件读取为二进制字符串
var f = this.file;
var reader = new FileReader();
//if (!FileReader.prototype.readAsBinaryString) {
FileReader.prototype.readAsBinaryString = function (f) {
var binary = "";
var rABS = false; //是否将文件读取为二进制字符串
var pt = this;
var wb; //读取完成的数据
var outdata;
var reader = new FileReader();
reader.onload = function (e) {
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就是你想要的东西 excel导入的数据
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
// excel 数据再处理
let arr = []
outdata.map(v => {
// let jsonString = JSON.stringify(v).replace(/\*/g, '').replace(/\s/ig,'');
let jsonString = JSON.stringify(v).replace(/\//g, '').replace(/\s/ig,'');
debugger;
console.log(jsonString);
v = JSON.parse(jsonString);
let obj = {}
//xxx代表列名
obj.riskType = v.xxx
obj.riskDescription = v.xxx
obj.typeAccident = v.xxx
obj.riskLevel = v.xxx
obj.controlMeasures = v.xxx
obj.hierarchyManage = v.xxx
obj.orgLiableDict = v.xxx
obj.personLiableDict = v.xxx
// obj.id = v.id
arr.push(obj)
})
_this.accountList = [...arr];
}
reader.readAsArrayBuffer(f);
}
if (rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
},
更多推荐
已为社区贡献18条内容
所有评论(0)