가져온 데이터를 엑셀 다운로드 하는 방법

설명 이유 

관리자 페이지를 하면서 데이터를 리스트로 보여주고 있지만 문서로 확인해야하는 경우도 있습니다. 그래서 해당 데이터를 문서 요구사항에 맞게 셋팅해서 출력을 하면 직접 엑셀로 수작업 할 필요 없이 자동으로 되어 시간을 절약할 수 있습니다. 

 

필요 조건 

1. 엑셀 출력할 데이터 배열 

2. exceljs 설치 및 연결 (import ExcelJS from "exceljs")

 

엑셀다운로드 버튼을 클릭했다는 가정하에 진행하겠습니다.

 

1. header에 들어갈 data를 셋팅합니다. 

        const data = [
          [
            { value: "A", width: 10 },
            { value: "B", width: 60 },
            { value: "C", width: 20 },
          ],
        ];

2. header 이후에 들어갈 실제 데이터를 넣을 rowData를 셋팅합니다. 

        const assetKeys = Object.keys(asset);
        assetKeys.forEach((id, i) => {
          console.log("id 확인: ", id);
          const rowData = [
            { value:  asset[id]?.name || "" }, 
            { value:  asset[id]?.title || "" }, 
            { value:  asset[id]?.commend || "" }, 
          ];
          data.push(rowData);

설명)

• asset 데이터가 예를 들어서 [{0:{name:"박준희", title:"테스트입니다", commend:"감사합니다"}}] 일 때 assetKeys의 값은 ['0'] 이 나오고 foreach 반복문을 이용할때에는 0의 값이 나오므로 rowData에는 해당 데이터에 각 row에 넣을 데이터들을 셋팅하게 됩니다. 
• data.push(rowData) 풀이 : 처음에 header에 해당되는 data를 보면 [[], ....]이런 형태로 된 것을 확인하실 수 있을 것입니다. 즉 여기에 실제로 데이터를 넣을 row도 추가하게 되면 형태는 [[], [], [] ...] 이런 형태가 될 것인데 각 배열은 row에 해당되고 그 안에 [{}, {}, {}, ....] 에서 json형식으로 들어가져 있는것은 column에 해당되게 됩니다. 

3. 시트 생성 및 엑셀 파일 다운로드 구현 합니다. 

const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet("Sheet1");

const headerRow = data[0].map((cell) => cell.value);
// 예시 데이터 행 추가
const row = worksheet.addRow(headerRow);
row.eachCell((cell, colNumber) => {
     const width = data[0][colNumber - 1].width;
     worksheet.getColumn(colNumber).width = width;
 });

// 모든 행에 대한 높이를 조절합니다.
data.slice(1).forEach((rowData, rowIndex) => {
   const row = worksheet.addRow(rowData.map((cell) => cell.value));
   const targetRowHeight = 50; // 원하는 높이 (단위: 픽셀)
   row.height = targetRowHeight;
});

// 엑셀 파일 다운로드
workbook.xlsx.writeBuffer().then((buffer) => {
     const excelData = new Blob([buffer], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
     });
     const excelUrl = URL.createObjectURL(excelData);
     const link = document.createElement("a");
     link.href = excelUrl;
     link.download = "sample.xlsx";
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
 });

설명)

• worksheet.addRow : data[0] 즉 headerRow값을 먼저 넣고 그 이후에 데이터 row 값들을 셋팅합니다. 
• 엑셀 파일 다운로드하게 될때 link.download에 sample.xlsx 파일을 받게 됩니다. 

tip)

chatgpt에 물어볼 때 exceljs로 엑셀다운로드 하고 싶은데 어떻게 해야하는지 코드 알려달라고 하면 대략적인 코드가 나올것이고 이 형식에 맞추고 싶다면 const data = [[]] 형식으로 코드 올린 것을 복사해서 이부분을 header 데이터로 시작할 때 어떻게 해야하는 지 물어보고 난 이후에 동작 여부에 따라서 제가 올려드린 코드 적용하시면 제대로 동작될 것입니다.