xlsx라이브러리 사용하여 엑셀 파일로 다운로드 기능 심어주기

엑셀 다운로드 버튼을 누르면 엑셀 파일이 다운로드 되도록 요청을 받았는데 첨엔 으잉? 그걸 어케해??했지만

찾아보니 라이브러리를 이용해 정말 간단하게 할 수 있는 기능이었다.

정말이지.. 다양한 오픈소스를 활용할 수 있는 이 시대에 개발자란것에 감사해야쥐..

 

xlsx라이브러리를 먼저 설치해주고 import해줘야한다.

<Button 
	size = 'medium'
	onClick = { this.downloadExcelFile }
>엑셀 
 <Icon className="download"/>
 {this.state.fileDownloading?
	<div class="ui mini active inline loader"/>
	: null
  }
</Button>

다운로드 버튼을 만들어주었으면 onClick 함수의 downloadExcelFile을 뜯어보자.

 

사실 원래 다운로드 코드는 간단하게 구현가능한데, 이것저것 경우의 수를 고려하고 나의 기존 코드에 맞게 변경하다보니 코드가 길어졌다.

downloadExcelFile(){
        let paramPage = 0;
        let temp = {};
        // let columnsTitle = ['ID', '이름', '출발일시', '출발지', '도착지', '요청사항', '예상 사용시간', '실제 사용시간', '운행상태', '차종', '차량색상', '차량번호', '기사', '기사번호']
        let result = [];
        let that = this;
        this.setState({fileDownloading: true});
        let fromDate = this.state.searchFromDate ? this.state.searchFromDate : moment(new Date(0)).format('YYYY-MM-DD 00:00:00').toString()
        callExcelData();
        async function callExcelData(){
            await Api.searchReservations(appCtx.getAuthToken(), that.state.searchLoginId, that.state.searchClientName, 
            that.state.searchStatus, fromDate, that.state.searchToDate, that.state.frExpectedUsageTimeInSec,
            that.state.toExpectedUsageTimeInSec, Math.max(paramPage, that.state.activePage), EXCEL_DOWNLOAD_SIZE, 'id,desc').then(
                res => {
                    if(res.resultCode === THResultCode.SUCCESS) {
                        for(let i in res.response.elements){
                            let element = res.response.elements[i]
                            temp = {
                                ID: element.loginId, 
                                이름: element.clientName, 
                                출발일시: element.departDatetime, 
                                출발지: element.departAddress, 
                                도착지: element.destinationAddress, 
                                요청사항: element.clientRequest,
                                예상사용시간: element.frExpectedUsageTimeInSec==null? "0" : element.frExpectedUsageTimeInSec==36000? '10시간 이상' : element.frExpectedUsageTimeInSec/3600 +'-'+ element.toExpectedUsageTimeInSec/3600,
                                실제사용시간: element.usageTimeInSec/3600,
                                운행상태: element.bookingStatus==1? '접수대기': element.bookingStatus==2? '예약완료' : element.bookingStatus==3? '운행완료' : element.bookingStatus==4? '예약취소 요청' : '예약취소',
                                차종: element.vehicleType,
                                차량색상: element.vehicleColor,
                                차량번호: element.vehicleNumber,
                                기사: element.driverName,
                                기사번호: element.driverContactNum
                            }
                            result = [...result, temp]
                        }
                        // result = [...result, ...res.response.elements]
                    } else {
                        throw new Error(res.toString());
                    }
                }).then(() => {
                    if(paramPage < that.state.lastPage){
                        paramPage++
                        callExcelData();
                    } else {
                        that.exportExcel(result);
                        that.setState({fileDownloading:false})
                    }}).catch(err => {
                        that.setState({fileDownloading:false})
                        // console.log(`다운로드 정보용 정보 호출 - 실패 ${err}`)
                    })
            }
        }

api를 호출해 불러온 데이터를 for문 돌면서 result 배열에 넣어준다. 마지막 페이지에 닿았을때 exportExcel함수를 호출한다.

 

exportExcel(data: []){
  const ws = xlsx.utils.json_to_sheet(data);
  const wb = xlsx.utils.book_new();

  xlsx.utils.book_append_sheet(wb, ws, '예약관리목록');
  xlsx.writeFile(wb, '예약관리목록.xlsx');
  this.setState({fileDownloading:false})
}

위 코드는 xlsx라이브러리 내장 함수로 엑셀 워크북을 생성해주고 파일을 다운받을때 파일 제목을 지정해줄 수 있다.

그리고 fileDownloading state를 만들어 파일이 다운로드 될 동안의 스피너도 생성해주었다.

 

자바스크립트 엑셀파일 다운로드는 라이브러리만 잘 활용하면 간단하게 완료!