지난번에는 데이터를 엑셀로 다운로드 받는 것을 진행 하였다. 이번에는 그것의 엑셀의 데이터를 읽어오도록 하자. 일단 엑셀데이터의 형식을 결정해보자.
엑셀 데이터 불러오기
일단 아래의 코드를 확인하자.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<script>
function importExcelData(event){
const file = _.get(event, 'target.files.0')
if(!file) {
throw 'file not found'
}
let reader = new FileReader()
reader.readAsBinaryString( file )
reader.onload = () => {
let wb
try {
wb = XLSX.read( reader.result, { type: 'binary' } )
} catch( error ) { throw error }
const excelData = _.map(wb.Sheets, (sheet) => {
const decodeRange = XLSX.utils.decode_range( sheet['!ref'] )
const header = _(decodeRange.s.c).range(decodeRange.e.c + 1).map(c => {
const location = { c, r: decodeRange.s.r }
const encodeCell = XLSX.utils.encode_cell( location )
return _.get(sheet, `${encodeCell}.v`)
}).value()
return _(decodeRange.s.r + 1).range(decodeRange.e.r + 1).map(r => {
const items = _(decodeRange.s.c).range(decodeRange.e.c + 1).map(c => {
const location = { c, r }
const encodeCell = XLSX.utils.encode_cell( location )
return _.get(sheet, `${encodeCell}.v`)
}).value()
return _.zipObject(header, items)
}).value()
})
console.log('excelData', excelData)
}
}
</script>
</head>
<body>
<input type="file" onchange="importExcelData(event)">
</body>
</html>
뭐 reader.onload쪽만 확인하도록 하자, sheetJS의 코드는 거기 밖에는 없다.
처음에 실행해야 할 코드는 이거다.
wb = XLSX.read( reader.result, { type: 'binary' } )
별거 아니다. 엑셀 파일에서 데이터를 불러오는 역할을 한다. 이미 저 당시에도 데이터는 다 확인 가능 할 수 있는 수준이다.
위의 데이터는 wb를 콘솔에 찍어본 것 뿐이다. 이미 어차피 데이터는 다 가져왔으므로 여기서 데이터를 그냥 빼오는 것도 무리 없다. 하지만, 저걸 그대로 빼오기에는 귀찮으니 계속 설명을 이거 가면,
const decodeRange = XLSX.utils.decode_range( sheet['!ref'] )
위의 코드는 sheet내에서의 데이터 범위를 나타내준다.
그리고 아래의 코드이다. 우리는 위에서 가져온 범위에 따라 해당 데이터를 가져와야 한다.
const location = { c, r: decodeRange.s.r }
const encodeCell = XLSX.utils.encode_cell( location )
return _.get(sheet, `${encodeCell}.v`)
encode_cell은 별건 아니다. { c:0, r:0 }은 A1이라고 바꾸어줄 뿐이다. 그리고 우리는 그 안내해준 위치를 sheet에서 가져오면 될 뿐이다.
엑셀 다운로드와 엑셀데이터 로드는 이 라이브러리로 인하여, 구현이 꽤나 쉬워졌다. 만약에 라이브러리 없이 제공하려고 했으면, csv를 읽어 들이는 수준으로 개발해주거나, 개발하기 위한 기간이 꽤 길었을 것이라 생각된다.
댓글
댓글 쓰기