엑셀 다운로드 버튼 개발 후기

엑셀 다운로드 버튼 컴포넌트를 새로 만들어야 하는 상황에서 겪었던 일들을 작성하려고 한다!

현재 개발하고있는 프로젝트는 Nuxt를 사용하여 개발중이다.

기획된 사항은 아래와 같다.

• Table이 있는 페이지 상단에 모두 엑셀 다운로드 버튼이 있어야 한다.
• 다운로드 시 전체데이터 (row data)가 다운되어야 한다.
• 다국어 페이지이므로 다운로드 시 해당 언어에 맞게 자료가 나와야한다.

일단 테이블이 있는 모든 페이지에 엑셀 다운로드 버튼이 들어가야 하므로,
ExcelDownloadButton.vue 라는 컴포넌트를 만들어서 해당 페이지에서 props로 데이터를 넘겨주는것으로 했다.

엑셀 다운로드 라이브러리는

"xlsx": "^0.18.5"

해당 라이브러리를 사용했다. (참고)

ExcelDownloadButton.vue 의 다운로드 함수는

const downloadExcel = (data) => {
  const worksheet = XLSX.utils.json_to_sheet(data);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'my_sheet');
  XLSX.writeFile(workbook, `${props.title}.xlsx`);
};

이렇게 작성했다.

그리고 template부분에는 다운로드 버튼 클릭 이벤트를 위해 아래와 같이 작성했다.

<button @click="downloadExcel(props.data)">

---

그런데, 문제가 페이지네이션으로 페이지 누를때마다 서버 통신하는 페이지였다 😢
애초에 mount 될때 전체 데이터를 가져오면 해당 함수로 엑셀 다운로드가 가능하지만, 페이지네이션으로 한페이지씩 가져오는 데이터의 경우, 해당 페이지의 정보만 엑셀다운로드가 되었다.

그래서 전체데이터를 가져오는 api를 해당 페이지에서 props로 ExcelDownloadButton.vue로 넘겨주고, 해당 api가 있으면 데이터를 가공하는 함수를 하나 더 만들었다.

const dataSet = async (data) => {
	let excelArray = [];
    
    if (data.apiUrl) {
    	const result = await axios.post(data.apiUrl, {
				페이로드 ....,
			});
            
            const resultData = result.data.result.table;
				const totalCount = resultData.total_count;

				resultData.data.forEach((item, index) => {
					excelArray.push({
						[data.columns[0].label]: item.title,
						[data.columns[1].label]: item.title,
						[data.columns[2].label]: item.url,
						[data.columns[3].label]: item.type,
						[data.columns[4].label]: item.count,
						[data.columns[5].label]: item.time,
					});
				});
                
    }
    
    downloadExcel(excelArray);
}

그러고 템플릿에서 onClick 이벤트도 dataSet 함수를 통과하도록 해당 함수에서 분기처리를 했다.

엑셀 다운로드 기능 개발은 처음이지만 재밌게했다!

끝!