[개인] 카스 전자 저울 연동 Packing List 자동 생성 프로그램 #1 | Vue.js, XLSX 모듈

| 개발 동기 및 내용

제조업에서 전산 업무를 맡았던 경험이 있다. 현장에서는 수기로 제품 라벨(생산 제품의 중량 표기가 중요)과 Packing List를 작성하고 있었는데 카스 전자저울과 라벨 프린트를 도입하게 되어 라벨은 자동으로 출력이 가능해졌다. 하지만 Packing List는 여전히 현장 작업자가 수기로 작성해야 했다. 살펴보니-다행스럽게도-카스 전자저울 프로그램은 mdb로 출력한 라벨 정보를 저장하고 있었다. 이 정보를 이용하면 Packing List를 자동 생성하고 출력할 수 있을 것 같았다. 그렇게 해서 당시에는 Python을 이용해 프로그램을 작성해 현장에 배포했었다. 이번에 부트캠프에서 Vue.js를 배운 김에 그 프로그램을 Vue.js로 다시 만들어 보기로 했다.

 

| 구현 기능 목록 및 진행 현황

☑ xlsx 파일을 읽어와 사용자가 입력한 로트번호를 조회

☑ 조회한 정보 수정 기능

☑ 고객사 정보 관리(모달)

□ 조회 정보 페이징

□ Packing List 생성, 출력, xlsx  내보내기(모달)

□ 스타일 작업(Bootstrap)

 

| 사용 기술

Vue.js, Bootstrap, XLSX 모듈

 

| 문제와 해결

부트캠프에서는 node.js에서 엑셀 파일을 불러오는 처리를 했었다. 하지만 이번 프로젝트에서는 node.js가 불필요하다고 판단하였다. node.js를 사용하지 않기로 하다 보니 xlsx의 데이터를 Json으로 변환하는 방법을 스스로 찾아야 했다. Javascript에서도 Node.js처럼 XLSX 모듈 사용이 가능했다. 구글링을 통해 처음 찾은 코드는 xlsx를 불러올 때 타입을 'array'로 지정하는 방식이었다. 처음에는 이 방식을 그대로 사용했는데 Simple Grid 작업에는 객체(xlsx의 sheet) 내 배열(sheet의 record) 데이터보다는 배열 내 객체 데이터가 효과적일 거라 판단하였다. 그래서-배열을 객체로 만드는 법 등-여러 가지로 알아보았는데 애초에 XLSX 모듈에서 xlsx 파일을 불러올 때 타입을 'binary'로 설정하면 처리가 가능했다. 이때 타입만 변경하면 안 되고 readAsArrayBuffer() 대신 readAsBinaryString()을 사용해야 한다(아래 코드 참조).

 

readFile(e) {
  let files = e.target.files
  let reader = new FileReader()
  const temp = []
  reader.onload = function (e) {
    let data = e.target.result
    let workBook = XLSX.read(data, { type: 'binary' })
    workBook.SheetNames.forEach(function (sheetName) {
      let xlsxToJson = XLSX.utils.sheet_to_json(workBook.Sheets[sheetName])
      temp.push(xlsxToJson)
    })
  }
  reader.readAsBinaryString(files[0])
  this.resultXlsxToJson = temp
},

 

| 다음 단계

현재 [그림 1]과 같이 xlsx 불러오기가 완료된 상태이다. 가까운 다음 단계는 아래와 같다.

1. 조회 정보 페이징 처리
2. Packing List 생성(모달)

 

[그림 1] xlsx 불러오기 구현 완료