SheetJS documentation: https://github.com/SheetJS/sheetjs#installation
Chinese version (it’s been a long time since the last update): https://github.com/rockboom/SheetJS-docs-zh-CN
Requirement 1 : The customer clicks to upload the production plan form file in the corresponding format, and clicks OK to import the production plan.
1. Download
Run the following command in the console
npm install xlsx
2. Introduction
Introduce xlsx in the page
3. Front-end code
4. JS code
lodingExcelDate() {
let file = this.$refs["importfile"].files[0];
//获取最后一个.的位置
var index = file.name.lastIndexOf(".");//①
//获取后缀
var ext = file.name.substr(index + 1);
if (ext == "xls" || ext == "xlsx") {
let reader = new FileReader();
let that = this;
let mfgorder = []; //excel解析出来的生产计划
reader.onload = function (e) {
var data = new Uint8Array(e.target.result);
var workbook = XLSX.read(data, {
//②
type: 'array',
cellText: false,
});
for (let sheet in workbook.Sheets) {
//③
//获取当前选中的产线
let line = that.lineList.find(item => {
return item.lineId == that.lineId
})
//判断excel中是否存在对应产线信息
if (!workbook.Sheets.hasOwnProperty(line.lineName)) {
//④
that.$message({
message: "Excel中无对应产线的生产计划！",
type: 'error'
});
return;
}
//只解析选中的产线的生产计划
if (sheet.indexOf(line.lineName)!=-1) {
//⑤
//解析Excel
mfgorder = XLSX.utils.sheet_to_json(workbook.Sheets[sheet], {
//⑥
raw: false,
range: 2
})
//处理合并单元格的字段问题 设置生产订单等字段的键
for (let mfg of mfgorder) {
//⑦
for (let key in mfg) {
switch (key) {
case "__EMPTY":
delete mfg[key]
break;
case "__EMPTY_1":
mfg["mfgorderCode"] = mfg[key];
delete mfg[key]
break;
case "__EMPTY_2":
mfg["mfgplanCode"] = mfg[key];
delete mfg[key]
break;
case "__EMPTY_3":
mfg["mfgorderUser"] = mfg[key];
delete mfg[key]
break;
case "__EMPTY_4":
mfg["materialId"] = mfg[key];
delete mfg[key]
break;
case "__EMPTY_5":
mfg["mfgorderSmt"] = mfg[key];
delete mfg[key]
break;
case "__EMPTY_6":
mfg["mfgorderDate"] = mfg[key];
delete mfg[key]
break;
case "__EMPTY_7":
mfg["mfgorderOut"] = mfg[key];
delete mfg[key]
break;
case "__EMPTY_8":
mfg["planQty"] = mfg[key];
delete mfg[key]
break;
case "__EMPTY_9":
delete mfg[key]
break;
}
}
mfg.lineId = that.lineId;
}
console.log(mfgorder)
that.mfgorderList = mfgorder;
break;
}
}
}
reader.readAsArrayBuffer(file);
} else {
this.$message({
message: "请选择正确的EXCEL文件",
type: 'error'
});
}
},
5. Analyze the results
Attachment:
Data structure of back-end access form data: List<Map<String, String>> excelData
date processing code: DateUtil.date((Long.parseLong(key) - 25569) * 86400 * 1000 - 28800000)
①The acquired suffix code can be combined into
var ext = file.name.substr(file.name.lastIndexOf(".") + 1);
②workbook is the parsed entire table document
③workbook.Sheets is all the worksheets under the table
④hasOwnProperty 
⑤indexOf
⑥range: 2 indicates that the data in the third row is used as the key, and the data after the third row is used as the value.
⑦For example, when rows 2 and 3 are merged, the current row The third line of the second line is empty. When the key and value are empty, the current grid will not be parsed. When the key is empty, the value will be read. The key is given in the default order: __EMPTY, __EMPTY_1, __EMPTY_2, __EMPTY_3, __EMPTY_4···
SheetJS document ：Https://github.com/SheetJS/sheetjs#installation
⑧ How many rows of value, how many elements will the parsed array have
Chinese version (a long time since the last update): https://github.com/rockboom/SheetJS-docs-zh-CN
⑨The parsed date is a number reason
⑩The JS code template of the document table analysis is in Browser drag-and-drop Folding block
Requirement 2 : The customer clicks to upload the module table file in the corresponding format, and then clicks OK to import the module data.
1. Front-end code
2. JS code
lodingExcelDate() {
letfile = this.$refs["importfile"].files[0];
let reader = new FileReader();
let that = this;
let packageRecord = [];
reader.onload = function (e) {
var data = new Uint8Array(e.target.result);
var workbook = XLSX.read(data, {
type: 'array'
});
for (let sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
let head = XLSX.utils.sheet_to_json(workbook.Sheets[sheet], {
//②
raw: false,
range: 'A1:L1',
header: 'A'
})
if (head[0].D != 'SN' && head[0].E != "MAC") {
that.$message({
message: "请选择正确的模块信息文件",
type: 'error'
});
return;
}
packageRecord = XLSX.utils.sheet_to_json(workbook.Sheets[sheet], {
raw: false,
range: 1,
header: "A"
})
//只取D E两列的值
for (let record of packageRecord) {
that.packageRecordList.push({
"barcodeModule": record.D,
"barcodeMac": record.E,
"recordStatus": ''
})
}
}
break;
}
}
reader.readAsArrayBuffer(file);
},
3. Analyze the results
Attachment:
①Note that the main analysis is to obtain data in a certain column
of the table ②Get the header of the table to determine whether there is the required data
range:'A1:L1' means the range is from column A1 to column L1
