Excel 변환하기 - React

들어가며

서버에서 처리하지 않고 클라이언트에서 엑셀을 생성해야 하는 경우가 있다.
예를 들어
1. 등록 양식
2. JSON 형식으로 넘어온 데이터를 엑셀로 보여주기
나는 등록 양식을 만들기 위해서 엑셀이 필요했다.

1. 설치

npm i exceljs file-saver --save

exceljs는 엑셀 생성하기 위한 라이브러리
file-saver는 엑셀 파일을 출력하기 위한 라이브러리

2. Excel 생성

/* 등록 양식 */
excelDownload = async() => {
    const workbook = new ExcelJs.Workbook();
    const workSheet = workbook.addWorksheet("Sheet1");
}

일단 exceljs 라이브러리를 통해 Workbook( ) 엑셀을 생성한 후 sheetName 설정한다.

excelDownload = async() => {
    ...생략
    
    // Header 생성
    workSheet.columns = [
      { header: "헤더 1", key: "key1", width: 20, },     
      { header: "헤더 2", key: "key2", width: 18,  },    
      { header: "헤더 3", key: "key3", width: 18, },             
      { header: "헤더 4", key: "key4", width: 17, },      
      { header: "헤더 5", key: "key5", width: 10, },  
      { header: "헤더 6", key: "key6", width: 13,},   
      { header: "헤더 7", key: "key7", width: 13,  }, 
      { header: "헤더 8", key: "key8", width: 22,  }, 
      { header: "헤더 9", key: "key9", width: 20,  }, 
      { header: "헤더 10", key: "key10", width: 21,}, 
      { header: "헤더 11", key: "key11", width: 20,}, 
      { header: "헤더 12", key: "key12", width: 20,  }, 
    ];
}

데이터를 설정하기 전에 header를 만들어준다.
DB의 컬럼 수는 많지만 꼭 필요한 것들만 넣어주었다.
만약 문자열이 긴 경우 width 필수이다.
만약 width 없을 경우 마우스를 길이를 늘려야 하는 불편함이 생긴다.

excelDownload = async() => {
    ...생략

    // 기본행 생성
    workSheet.addRow({ key1:'', key2:'', key3:'', key4:'', key5:'', 
                       key6:'', key7:'', key8:'' ,
                       key9:30, key10:30,key11:30, key12:30 })

    // Style 설정
    workSheet.eachRow(() => {
      workSheet.getRow(1).border= {
          top:    {style:'thin'},
          left:   {style:'thin'},
          bottom: {style:'thin'},
          right:  {style:'thin'}
      }
      workSheet.getRow(1).fill = {
        type:    'pattern',
        pattern: 'solid',
        fgColor: { argb:'e7e6e6'}
      }
      workSheet.getRow(1).alignment = {
        horizontal: 'center',
      }
    })
}

첫 행에 key9, key10, key11, key12는 default 값을 넣어주었다.
header와 row 분별할 수 있게 border, font 설정해주었고 행은 가운데로 글자로 올 수 있게 설정해주었다.

excelDownload = async() => {
    ...생략

    // 다운로드
    const mimeType = { type: "application/vnd.openxmlformats-
                                           officedocument.spreadsheetml.sheet" };
    const buffer = await workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], mimeType);
    saveAs(blob, "result.xlsx");
}

클라이언트에서 Axios를 통해 타입은 responseType: 'arraybuffer' 설정 후
Blob( ) 객체를 통해 엑셀 파일을 출력한다. Blob( ) 객체가 엑셀 파일을 인식할 수 있게 타입을 설정해줘야 한다.
saveAs를 통해 이름을 설정한 뒤 파일을 출력한다.