[Vue.js] 엑셀(Excel) 다운로드 기능 구현하기 ExcelJS, file-saver

1. 플러그인

- ExcelJS : 소스만봐도 어떤 기능인지 금방 파악할 수 있을 정도로 사용하기 간편하게 구성되어 있고, 공식문서 또한 잘 정리되 있어 참고하며 혼자 개발하기에도 좋다.

ExcelJS 공식문서 : https://github.com/exceljs/exceljs

GitHub - exceljs/exceljs: Excel Workbook Manager

- file-saver : ExcelJS에는 엑셀파일을 생성 후 파일로 추출하는 기능이 없기때문에 파일을 추출할 수 있는 라이브러리를 추가해주어야 한다.

- 설치 : 터미널에서 각각 npm i exceljs / npm i file-saver 를 입력해서 설치하도록 하자.

2. 엑셀 만들기

- excel.js 파일생성 : common 폴더를 만들고 해당 폴더에 excel.js 파일을 생성하여 아래와 같이 ExcelJS와 file-saver 를 import 하였다.

1) 워크북 생성하기

const workbook = new ExcelJS.Workbook();

이렇게 워크북을 생성하면 그 위에 시트를 생성하고 데이터를 삽입할 수 있다.

 

2) 시트 생성하기

let worksheet = workbook.addWorksheet('TestSheet');

이렇게 시트를 추가하면 아래의 이미지처럼 시트가 생성되는 것이다.

 

3) 컬럼 추가하기

엑셀에 데이터를 입력한다고 생각해보자, 아래 이미지처럼 일반적으로 행과 열로 구분되어 컬럼명을 기준으로 데이터를 입력할 것이다.

이 중, 컬럼은 이름과 나이 직업에 해당할 것이다.

ExcelJS는 컬럼에 대한 속성과 값을 지정해줘야 데이터를 쓸 수 있도록 설계되어 있다.

 

아래와 같이 컬럼을 추가해보자, 데이터는 객체로 구성된 배열을 전달해줘야 한다.

worksheet.columns = [
    {
      header: '이름',
      key: 'name',
      width: 12,
    },
    {
      header: '나이',
      key: 'age',
      width: 12,
    },
    {
      header: '직업',
      key: 'job',
      width: 12,
    },
  ];

header 는 컬럼명이 되고 key는 데이터(rows)를 입력할 때의 키값이 되며 이외에도 다양한 속성이 있으나 간단하게 width로 행 넓이까지 추가해 보았다.

 

4) 데이터(rows) 추가하기

위에서 지정한 컬럼에 데이터를 입력해 줄 차례이다.

insertRows 메서드에 대한 ExcelJS의 공식문서를 살펴보자.

첫번째 파라미터는 몇번째 열부터 데이터를 입력할지에 대한 number 값 인자를 받는다.

공식문서 설명에는 없지만, 1번 열의 index가 1부터 시작한다. 2열부터 rows를 입력할 것이기 때문에 첫번째 인자값은 2를 주었고, style은 필수값이 아니기에 지금은 빼도록 한다.

worksheet.insertRows(2, [
    {
      name: '아이유',
      age: 20,
      job: '개발자',
    },
    {
      name: '권나라',
      age: 23,
      job: '디자이너',
    },
    {
      name: '문가영',
      age: 22,
      job: '퍼블리셔',
    },
    {
      name: '수지',
      age: 21,
      job: '기획자',
    },
  ]);

 

3. 파일 내보내기

이렇게 기본적으로 데이터가 갖추어진 시트가 완성되었지만, 아쉽게도 ExcelJS는 파일로 내보내는 라이브러리가 없어서 file-saver를 이용해 볼 예정인데, 일단 공식문서를 먼저 살펴보자.

공식문서의 XLSX 파일로 내보내는 가이드인데 writeFile() 메서드는 어째서인지 작동을 안한다.

그래서 buffer에 담아 가져온 다음 blob 처리 해서 파일로 내보낼 것이다.

blob 은 간단하게 객체화 된 파일이라고 보면 되는데, 자세한건 따로 검색해보길 바란다.

 

async function exportExcel(fileName) {
  const buffer = await workbook.xlsx.writeBuffer();
  saveAs(new Blob([buffer]), fileName);

  workbook.removeWorksheet();
}

비동기 처리를 해야해서 함수로 뺀 다음 async await를 적용하였다.

removeWorksheet() 는 선택사항인데, workbook 객체는 같은 이름의 시트는 생성할 수 없다. 엑셀처럼.

그래서 workbook을 매번 다시 생성하거나 기존 worksheet를 삭제한 다음 다시 생성하는게 낫다고 판단하여 removeWorksheet() 메서드를 추가하였다.

 

4. 전체소스

본문의 내용을 응용하였으니 참고하여 본인의 소스에 적용하기 바랍니다.

 

 

 

참고자료

https://tesseractjh.tistory.com/236

[JS] 자바스크립트로 엑셀 파일(xlsx) 만들어서 다운받기