웹의 내용을 출력하기 위해서 엑셀 형식으로 다운로드 되게 해줘야 할때가 있다.
백단에서 만들어 줘도 되지만, 자바스크립트로 처리 하는게 편할때가 많다.
exceljs는 자바스크립트 엑셀 라이브러리 중에서 제일 괜찮은듯 보인다.
그 사용법을 간략하게 설명하고자 한다.
설치
https://github.com/exceljs/exceljs
GitHub - exceljs/exceljs: Excel Workbook Manager
Excel Workbook Manager. Contribute to exceljs/exceljs development by creating an account on GitHub.
github.com
위의 깃허브 페이지에 접속하면 전체 소스를 다운받아 볼 수 있다.
간단하게 npm으로 설치 하려면
npm install exceljs
위의 명령어로 설치 가능하다.
cdn으로 쓰려면
<script src="https://cdn.jsdelivr.net/npm/exceljs@4.3.0/dist/exceljs.min.js"></script>위의 스크립트를 html 스크립트로 붙여 넣으면 된다.
파일 다운로드
간단한 테스트 파일을 다운로드 하는 코드은 다음과 같다.
html
<html lang="ko">
<head>
<title>exceljs</title>
</head>
<body>
<button id="down">엑셀 다운로드</button>
<script src="test_exceljs_js.js"></script>
<script src="https://cdn.jsdelivr.net/npm/exceljs@4.3.0/dist/exceljs.min.js"></script>
</body>
</html>javascript
document.querySelector('#down').addEventListener('click', makeFile);
function makeFile (e) {
const workbook = new ExcelJS.Workbook();
const sheet = workbook.addWorksheet('tab_1');
download(workbook, 'test').then(r => {});
}
const download = async (workbook, fileName) => {
const buffer = await workbook.xlsx.writeBuffer();
const blob = new Blob([buffer], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
});
const url = window.URL.createObjectURL(blob);
const anchor = document.createElement('a');
anchor.href = url;
anchor.download = fileName + '.xlsx';
anchor.click();
window.URL.revokeObjectURL(url);
};엑셀 다운로드 버튼을 클릭하면 makeFile 함수가 실행 되면서 workbook 변수를 만들고 sheet를 만들게 된다.
이때 시트의 이름을 지정해 줄 수 있다. 그리고 downlload 함수에 workbook 변수와 파일 이름을 지정해서 전달하게 되면
download 함수에서 파일을 다운로드 하게 된다.
셀 선택
셀을 선택 하기에 앞서, 시트 변수가 sheet 라면 열과 행 전체를 선택하는 방법은 다음과 같다.
변수로 열과 행의 번호를 넣어주면 된다.
// 열 선택
sheet.getColumn(1);
// 행 선택
sheet.getRow(3);셀을 선택하는 방법은 보통 두가지를 사용하게 된다.
1. 엑셀 열의 알파뱃 기호를 쓰는 방법
2. 열과 행의 숫자를 쓰는 방법
어느쪽을 쓰는가는 그때 그때 상황에 맞게 쓰면 된다.
// 열의 알파뱃으로 쓰기
sheet.getCell('C9');
// 숫자로만 쓰기
sheet.getCell(2,10);이 때 주의할 점은 열과 행을 지정하는 순서가 다르니 헷갈리지 않도록 주의 해야 한다.
셀 합치기
셀을 합치기 위해서는 mergeCells 함수를 이용해 시작 셀과 마지막 셀을 지정해 주면 된다.
2열 이상의 경우 좌상단에서 시작해 우하단 셀을 적어주면 된다.
sheet.mergeCells('V9 : V11');
// 열이 2개 이상의 경우
sheet.mergeCells('W9 : Z9');
// 행과 열의 번호로만 쓰게 될 경우
// ([시작행],[시작열],[끝행],[끝열])
sheet.mergeCells(3,3,4,4)합쳐진 셀을 선택하기 위해서는 시작셀이나 마지막 셀을 선택하면 된다.
값 넣기
셀을 선택 했으니 값을 넣어보자.
값을 넣는 가장 간단한 방법은 다음과 같다.
sheet.getCell('D4').value = 'hey dev';혹은 rich text 를 지원하는데 그 예시 코드는 다음과 같다.
sheet.getCell('C11').value = {
richText: [{
text: '주소',
font: {size: 9, italic: true}
}]
};
셀을 지정하고 값을 넣는 과정을 예제로 만들어 보면 다음과 같은 결과가 나온다.
function makeFile (e) {
const workbook = new ExcelJS.Workbook();
const sheet = workbook.addWorksheet('tab_1');
sheet.getCell('A2').value = 3.66;
sheet.getCell(2,4).value = 'program';
sheet.mergeCells('C4 : D5');
sheet.getCell('D5').value = 'merge';
sheet.getCell('B6').value = {
richText: [{
text: '리치텍스트',
font: {size: 9, italic: true}
}]
};
download(workbook, 'test').then(r => {});
}download 함수는 위쪽에 있는것을 그대로 사용하면 된다.
정렬 설정
셀의 정렬을 선택하기 위해서는 셀을 선택하고 alignment 설정을 해주면 된다.
가로 세로 정렬과 텍스트 줄바꿈을 설정하는 코드는 다음과 같다.
worksheet.getCell('A10').alignment = { vertical: 'top', horizontal: 'left' };
worksheet.getCell('B7').alignment = { vertical: 'middle', horizontal: 'center' };
worksheet.getCell('C3').alignment = { vertical: 'bottom', horizontal: 'right' };
// 줄바꿈 설정
worksheet.getCell('d6').alignment = { wrapText: true };
테두리 만들기
테두리 설정을 위해서는 border 설정을 해준다.
위, 아래, 좌, 우, 설정을 각각 해주면 되는데 보통은 style과 color를 지정해 주면 된다.
다음은 많이 쓰이는 style thin 과 medium 을 적용하는 코드다.
테두리를 설정 할 때는 이전의 설정이 적용 되지 않으므로 다시 설정 하려면 모든 방향을 다시 설정 해주어야 한다.
worksheet.getCell('E3').border = {
top: {style:'thin', color: {argb:'DB576D'}},
left: {style:'thin', color: {argb:'DB576D'}},
bottom: {style:'medium', color: {argb:'DB576D'}},
right: {style:'medium', color: {argb:'DB576D'}}
};
색 넣기
셀에 색을 넣는 변수를 fill 이다.
색상은 지정된 색이 있기는 하나, argb로 코드값을 넣는게 편하다.
다음은 단일한 회색을 넣는 예제 코드이다.
worksheet.getCell('U5').fill = {
type: 'pattern',
pattern:'solid',
fgColor:{argb:'D9D9D9'},
};
이외에도 위에 링크된 깃허브 페이지에 들어가면 상세한 설명이 나오니
따라하면 되겠다.