SheetJS 문서 : https://github.com/SheetJS/sheetjs#installation
중국어 버전 (마지막 업데이트 이후 오랜만) : https://github.com/rockboom/SheetJS-docs-zh-CN
요구 사항 1 : 고객이 클릭하여 해당 형식의 생산 계획 양식 파일을 업로드하고 확인을 클릭하여 생산 계획을 가져옵니다.
1. 다운로드
콘솔에서 다음 명령을 실행합니다.
npm install xlsx
2. 소개
페이지에서 xlsx를 소개합니다.
3. 프런트 엔드 코드
4. JS 코드
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. 결과 분석
첨부 :
백엔드 액세스 양식 데이터의 데이터 구조 : List<Map<String, String>> excelData
날짜 처리 코드 : DateUtil.date((Long.parseLong(key) - 25569) * 86400 * 1000 - 28800000)
① 취득한 접미사 코드를 다음과 같이 결합 할 수 있습니다.
var ext = file.name.substr(file.name.lastIndexOf(".") + 1);
②workbook은 파싱 된 전체 테이블 문서
③workbook.Sheets는 테이블
④hasOwnProperty 
⑤indexOf
⑥range : 2는 세 번째 행의 데이터가 키로 사용되고 세 번째 행 이후의 데이터가 값으로 사용됨을 나타
냅니다. 두 번째 줄의 세 번째 줄이 비어 있습니다. 키와 값이 비어 있으면 현재 그리드가 구문 분석되지 않습니다. 키가 비어 있으면 값을 읽습니다. 키는 기본 순서로 제공됩니다. __EMPTY, __EMPTY_1, __EMPTY_2, __EMPTY_3, __EMPTY_4 ···
SheetJS 문서 : Https://github.com/SheetJS/sheetjs#installation
얼마나 많은 값의 행, 얼마나 많은 요소를 구문 분석 된 배열이있을 것이다 ⑧
중국어 버전 (마지막 업데이트 이후 오랜 시간) : https://github.com/rockboom/SheetJS-docs-zh-CN
⑨ 파싱 된 날짜가 많은 이유
⑩ 문서 테이블 분석 JS 코드 템플릿이 브라우저에 있습니다. 드롭 폴딩 블록
요구 사항 2 : 고객이 해당 형식의 모듈 테이블 파일을 클릭하여 업로드 한 다음 확인을 클릭하여 모듈 데이터를 가져옵니다.
1. 프런트 엔드 코드
2. JS 코드
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. 결과 분석
첨부 :
① 주요 분석은
표의 특정 열에서 데이터를 얻는 것 입니다. ② 필요한 데이터
범위 가 있는지 확인하기 위해 표의 헤더를 가져옵니다 .'A1 : L1 '은 A1 열에서 L1 열까지의 범위를 의미합니다.
