[엑셀] SheetJs vs ExcelJs

엑셀 라이브러리 비교

SheetJs

• 현재 더 많이 사용하는 라이브러리
• 엑셀을 JSON 형식으로 뽑아서 읽고 쓰기 가능 → 엑셀 업로드를 SheetJs로 구현
• ExcelJs에 비해서 코드가 더 간략해진다는 장점이 있었으나 스타일링, 이미지 등은 유료 버전에서만 지원함
  

따라서 엑셀 다운로드 구현 시에 ExcelJs를 사용하기로 결정함(무료로 많은 기능을 지원)

SheetJs를 이용한 엑셀 업로드

• utils.sheet_to_json() : 엑셀 파일의 데이터를 Json 형식으로 변환
  • header: 1
    • 각 엑셀 셀을 요소로 가지는 2차원 배열 생성
  • header: 2
    • 엑셀의 첫번째 줄의 데이터들이 객체의 Key값이 되는 객체 배열 생성

💡 2개의 header가 존재하는데 별도로 처리하는 옵션이 없음! → 따라서 utils.sheet_to_json(rawData, { header: 1 })로 배열 데이터를 생성한 후에 상단에 2줄을 제거함 (data.slice(2))

• 작성한 엑셀 업로드 코드

  import { read, utils } from "xlsx";
  
  const readExcel = async (file) => {
    const fileReader = new FileReader();
    fileReader.readAsArrayBuffer(file);
    fileReader.onload = (e) => {
      if (!e.target) return;
      const bufferArray = e.target.result;
      const fileInformation = read(bufferArray, {
        type: "buffer",
        cellText: false,
        cellDates: true,
      });
      const sheetName = fileInformation.SheetNames[0];
      const rawData = fileInformation.Sheets[sheetName];
      const data = utils.sheet_to_json(rawData, { header: 1 });
      if (data.length >= 2) { 
        fileName = file.name;
        handleExcelData(data);  
      } else {
        alert("입력값이 올바르지 않습니다.");
      }
      isUploading = false;
    };
  };
  
  const handleExcelFileChange = (e) => {
    if (!e.target.files) return;
    const file = e.target.files[0];
    readExcel(file);
    e.target.value = "";
  };
  
  <input
    type="file"
    id="input_file"
    accept=".xls,.xlsx"
    on:change={(e) => handleExcelFileChange(e)}
  />

ExcelJs로 엑셀 다운로드 구현

• workbook 만들기

const workbook = new ExcelJS.Workbook(); // workbook 생성

• 생성한 workbook 안에 worksheet 만들기

const worksheet = workbook.addWorksheet('first sheet'); // worksheet 추가
workbook.removeWorksheet('sheet name' or index number); // worksheet 삭제

• 엑셀에 컬럼값을 추가

worksheet.columns = [
    { header: 'Id', key: 'id', width: 10 },
    { header: 'Name', key: 'name', width: 32 },
  ];

• 이때 테이블 헤더 스타일 정의 가능

const headerStyle = {
  alignment: { horizontal: "center" },
  font: { bold: true },
  fill: { type: "pattern", pattern: "solid", fgColor: { argb: "cce6ff" } },
};

worksheet.getRow(1).eachCell((cell) => {
  cell.style = { ...headerStyle };

• 엑셀에 컬럼별 데이터 넣기

const data = [
    {
      id: 1,
      name: 'Jamey',
    },
    {
      name: 'Jimmy',
      id: 2,
    },
    {
      id: 3,
      name: 'Jesus',
    },
  ];

  worksheet.insertRow(2, { id: 0, name: 'Jenny', DOB: '2020-11-11' });
  worksheet.insertRows(3, data);