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

 

엑셀 파일을 만들어주는 라이브러리에는 SheetJS, ExcelJS 등이 있는데, 그 중에서 비교적 엑셀 파일의 커스텀이 자유로운 ExcelJS에 대해서 다루도록 하겠다.

 

기본 형식

import ExcelJS from 'exceljs';

// workbook(엑셀 파일 하나를 구성하는 여러 시트로 이루어진 단위) 생성
const workbook = new ExcelJS.Workbook();
 
// sheet 생성
const worksheet = workbook.addWorksheet('시트 이름');

workbook은 하나의 파일을 나타내고, 하나의 workbook은 여러 개의 worksheet를 가질 수 있다.

 

 

데이터 입력 방식

ExcelJS에서는 다양한 방법으로 데이터를 입력할 수 있다. worksheet의 insertRows 메서드를 이용하여 여러 줄의 Row를 한꺼번에 입력할 수 있고, insertRow 메서드로 한 Row씩 입력할 수도 있다. 그리고 getRow, getColumn, getCell 등의 메소드를 사용하여 행 단위, 열 단위, 셀 단위로 조작할 수 있다.

 

예시 1

하나의 행을 "컬럼명: 값"의 형태로 나타낸 객체 배열 형태의 자료가 주어졌을 때

const data = [
  {
    column1: 'value1',
    column2: 'value2',
    column3: 'value3'
  },
  {
    column1: 'value4',
    column2: 'value5',
    column3: 'value6'
  },
  {
    column1: 'value7',
    column2: 'value8',
    column3: 'value9'
  }
];

// 컬럼명들이 담긴 배열이 필요함
// 그런 배열이 이미 존재한다면 아래와 같이 columns를 직접 만들지 않아도 됨
const columns = Object.keys(data[0]);

// worksheet에 컬럼에 대한 정보를 줌
// 맨 첫 번째 줄에 컬럼들이 삽입됨
worksheet.columns = columns.map((column) => ({
  header: column, // 컬럼 이름
  key: column // data에서 컬럼의 값을 구분하기 위한 key
}));

// 두 번째 줄부터 데이터 행들을 한꺼번에 입력
worksheet.insertRows(2, data);

 

예시 2

하나의 열을 컬럼명과 해당 열에 들어갈 값들을 담은 객체의 형태로 나타낸 자료가 주어졌을 때

const data = [
  { column: 'column1', values: ['value1', 'value2', 'value3'] },
  { column: 'column2', values: ['value4', 'value5', 'value6'] },
  { column: 'column3', values: ['value7', 'value8', 'value9'] }
];

// 별도로 worksheet.columns를 설정하지 않는다.

// getColumn으로 각 열에 직접 접근하여 배열의 형태로 값을 입력한다.
data.forEach(({ column, values }, index) => {
  worksheet.getColumn(index + 1).values = [column, ...values];
})

 

 

스타일 변경

columns에서 전체 컬럼(맨 윗줄)의 스타일을, 또는 getRow, getColumn, getCell로 직접 행, 열, 셀을 선택하여 스타일을 지정할 수 있다.

worksheet.columns = columns.map((column) => ({
  header: column,
  key: column,
  width: 40,
  style: {
    font: {
      size: 12
    },
    alignment: {
      vertical: 'middle',
      horizontal: 'center',
      wrapText: true
    }
  }
}));

worksheet.getRow(1).width = 50;
worksheet.getColumn(3).height = 25;
worksheet.getCell('A1').alignment.horizontal = 'center';

더 자세한 스타일 방법은 ExcelJS 깃허브 리드미에 정리되어 있다.

 

 

엑셀 파일 다운로드

1) file-saver 라이브러리 사용

$ npm install file-saver

import { saveAs } from 'file-saver';

const buffer = await workbook.xlsx.writeBuffer();
saveAs(new Blob([buffer]), '파일명.xlsx');

 

writeBuffter는 프로미스를 반환하므로 async 함수로 감싸주어야 한다.

보통 다운로드 버튼을 만들어 두고 쓸 테니 아래와 같이 하나의 함수를 만들어서 버튼의 click 이벤트 리스너로 등록하면 된다.

 

import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

const download = async () => {
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('시트 이름');

  const columns = Object.keys(data[0]);
  worksheet.columns = columns.map((column) => ({
    header: column,
    key: column
  }));
  worksheet.insertRows(2, data);

  const buffer = await workbook.xlsx.writeBuffer();
  saveAs(new Blob([buffer]), '파일명.xlsx');
};

 

2) 바닐라 자바스크립트

다운로드를 위한 별도의 라이브러리를 사용하지 않는 방법이다.

import ExcelJS from 'exceljs';

const download = async () => {
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('시트 이름');

  const columns = Object.keys(data[0]);
  worksheet.columns = columns.map((column) => ({
    header: column,
    key: column
  }));
  worksheet.insertRows(2, data);

  const buffer = await workbook.xlsx.writeBuffer();
  const blob = new Blob([buffer], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  });
  const url = window.URL.createObjectURL(blob); // blob으로 객체 URL 생성
  const anchor = document.createElement('a');
  anchor.href = url;
  anchor.download = '파일명.xlsx';
  anchor.click(); // anchor를 다운로드 링크로 만들고 강제로 클릭 이벤트 발생
  window.URL.revokeObjectURL(url); // 메모리에서 해제
};

 

 

참고자료

https://velog.io/@hahaha/ExcelJS-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0

[Node.js] ExcelJS 모듈

https://developer-talk.tistory.com/328

[JavaScript]exceljs 사용방법 및 엑셀 다운로드(내보내기)