1,引入对应的依赖
npm install xlsx
2,导入对应的依赖包
3,上传组件方法编码
<el-upload
class="upload-demo"
ref="upload"
action
:limit="1"
accept=".xlsx, .xls"
:show-file-list="true"
:auto-upload="false"
>
<el-button slot="trigger" size="small" type="primary">上传台账数据</el-button>
<el-button
style="margin-left: 10px;"
size="small"
type="success"
@click="submitUpload"
>解析xlsx</el-button>
<!-- <div slot="tip" class="el-upload__tip">仅允许导入xls、xlsx格式文件。</div> -->
</el-upload>
4,对应的提交方法
// 解析excel
submitUpload() {
let ev = Object.values(this.$refs.upload.uploadFiles)[0];
this.selectFileChange(ev);
this.$refs.upload.submit();
},
5,解析方法实现,包含excel有特殊字符处理
// 导入excel并解析
readFile(file) {
//文件读取
return new Promise(resolve => {
let reader = new FileReader();
reader.readAsBinaryString(file); //以二进制的方式读取
reader.onload = ev => {
resolve(ev.target.result);
};
});
},
async selectFileChange(ev) {
let file = ev.raw;
if (file.name.indexOf("xlsx") == -1 || file.name.indexOf("xls") == -1) {
this.$message({
message: "请选择xlsx、xls格式文件",
type: "warning"
});
return;
}
if (!file) {
this.$message({
message: "文件导入失败",
type: "warning"
});
return;
} else {
let data = await this.readFile(file);
let workbook = XLSX.read(data, { type: "binary", cellDates: true }); //解析二进制格式数据
// console.log('二进制数据的解析:')
// console.log(workbook)
let worksheet = workbook.Sheets[workbook.SheetNames[0]]; //获取第一个Sheet
let result = XLSX.utils.sheet_to_json(worksheet); //json数据格式
console.log(result);
for (let item in result) {
let rowTable = {};
//这里的rowtable的属性名注意要与上面的表格的prop一致
// sheetArray的属性名与上传的表格的列名一致
rowTable.plaOrderArea = result[item].下单地区;
rowTable.plaOrderTime = result[item].下单时间;
rowTable.needWorkshop = result[item].需求车间;
rowTable.needPerson = result[item].申请人;
rowTable.packWay = result[item].打包方式;
rowTable.purOrderNum = result[item].采购订单号;
rowTable.lineItemNum = result[item].行项目;
rowTable.purOrderItem = result[item]["采购订单号+行项目"];
rowTable.section = result[item].工段;
rowTable.createLine = result[item].线别;
rowTable.innerOrderNum = result[item].内部订单号;
rowTable.equName = result[item].设备名称;
rowTable.equDesc = result[item].设备描述;
rowTable.equLength = result[item]["设备尺寸长/mm"];
rowTable.equHeight = result[item]["设备尺寸高/mm"];
rowTable.equWidth = result[item]["设备尺寸宽/mm"];
rowTable.packLength = result[item]["木箱包装尺寸长/mm"];
rowTable.packHeight = result[item]["木箱包装尺寸高/mm"];
rowTable.packWidth = result[item]["木箱包装尺寸宽/mm"];
rowTable.packNum = result[item]["包装数量/m3"];
rowTable.realLength = result[item]["实际包装尺寸长/mm"];
rowTable.realHeight = result[item]["实际包装尺寸高/mm"];
rowTable.realWidth = result[item]["实际包装尺寸宽/mm"];
rowTable.realNum = result[item]["实际包装数量/m3"];
rowTable.weight = result[item]["重量/kg"];
rowTable.equNum = result[item].设备数量;
rowTable.surveyor = result[item].车间测量人;
rowTable.planReceiver = result[item].计划收料确认人;
rowTable.qualityLeader = result[item].品质负责人;
rowTable.projectFollower = result[item].记录录入人;
rowTable.packTime = result[item].打包日期;
rowTable.packCompany = result[item].打包公司;
rowTable.compConformer = result[item].打包公司确认人;
this.ruleForm.listTable.push(rowTable);
}
}
}
6,实现效果图