티스토리 뷰

exceljs란?

exceljs란 javascript에서 데이터를 엑셀로 추출 및 조작할 수 있는 라이브러리로, 특정 셀의 스타일을 커스텀하고 합칠 수 있는 장점이 있는 라이브러리이다.

 

공식 문서 링크

npm exceljs 링크

 

exceljs

Excel Workbook Manager - Read and Write xlsx and csv Files.. Latest version: 4.4.0, last published: 10 months ago. Start using exceljs in your project by running `npm i exceljs`. There are 1530 other projects in the npm registry using exceljs.

www.npmjs.com

 

npm file-saver 링크

 

file-saver

An HTML5 saveAs() FileSaver implementation. Latest version: 2.0.5, last published: 4 years ago. Start using file-saver in your project by running `npm i file-saver`. There are 5044 other projects in the npm registry using file-saver.

www.npmjs.com

 

 

기본 사용법

const workbook = new Exceljs.Workbook();
// 여러 엑셀 시트를 포함하는 하나의 workbook 생성

const worksheet = workbook.addWorksheet("시트 이름");
// 엑셀 sheet 생성

 

적용 예제

const data = [
    { id: 184302, email: "a@a", date: "2024-08-12" },
    { id: 15223, email: "b@b", date: "1231-4546" },
    { id: 48565, email: "c@c", date: "121-955-66" },
];

document.querySelector("#down").addEventListener("click", () => {
    download();
});

const download = async () => {
	// ExcelJS 라이브러리에서 Workbook 객체 생성
    const workbook = new ExcelJS.Workbook();
    // 새로운 워크시트를 생성하고 이름을 설정
    const worksheet = workbook.addWorksheet("시트 이름");
	
    // data 배열의 첫 번째 객체에서 열의 이름(키) 추출
    const columns = Object.keys(data[0]);
	
    // 워크시트의 열을 설정, 각 열의 헤더와 키를 정의
    worksheet.columns = columns.map((column) => ({
        header: column,	// 열의 헤더에 사용할 이름
        key: column,	// 데이터에 사용할 키
    }));
	
    // 워크시트의 두 번째 행부터 데이터 삽입
    worksheet.insertRows(2, data);
	
    // 워크북의 내용을 바이너리 형태의 버퍼로 변환, 이 버퍼는 Excel 파일의 내용을 포함
    const buffer = await workbook.xlsx.writeBuffer();
    
    // 바이너리 데이터를 Blob 객체로 변환, MIME 타입은 Excel 파일에 적합한 형식 설정
    const blob = new Blob([buffer], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    });
    
    // Blob 객체를 다운로드할 수 있는 URL 생성
    const url = window.URL.createObjectURL(blob);
   
    // 다운로드 링크를 생성하기 위해 <a> 엘리먼트 생성
    const anchor = document.createElement("a");
    
    // 생성한 url을 링크의 href 속성 설정
    anchor.href = url;
    
    // 다운로드할 파일의 이름 설정
    anchor.download = "파일명.xlsx";
    
    // 링크를 클릭하여 파일 다운로드
    anchor.click(); 
    
    // 메모리에서 URL을 해제하여 메모리 누수 방지
    window.URL.revokeObjectURL(url); 
};