TIL-2024.03.13 - JS - 엑셀 다운로드 (Excel Download in Vue)

 

목표:

• 버튼을 클릭 시, 저장된 값을 엑셀로 다운로드 하는 기능

 

 

1. yarn add xlsx 를 통한 외부 라이브러리 다운로드 (버전 0.18.5)

yarn add xlsx@0.18.5

 

 

2. template에 button tag 생성하고, fnDownloadExcel를 바인딩

<template>

  ... 중략 ... 
<button @click="fnDownloadExcel"> 다운로드 </button>
  ... 중략 ... 
  

</template>

 

 

3. Script Setup에 fnDownloadExcel , fnExtractProperties 등을 작성

<script setup>

import * as XLSX from "xlsx"; 
// import XLSX from "xlsx";  > X
//본질적인 문제는 SheetJS가 CJS에서 ESM 모듈로의 전환 과정에서, 번들러가 내보내는 내용이 변경되어 import 방법을 변경. 



  ... 중략 ... 
const properties = [
  {key: "firstName", value: "이름"},
  {key: "lastName", value: "성"},
  ... 중략 ... 
];



// 데이터의 각 항목을 매핑하여 새로운 배열을 생성. (새로운 항목의 속성 이름은 'properties' 배열에서 지정된 'value' 값으로 설정)
const fnExtractProperties = (data) => {
  const res = data.map(item => {
    const newItem = {};
    // 각 항목의 키와 값을 사용하여 새로운 항목을 생성.
    properties.forEach(prop => {
      newItem[prop.value] = item[prop.key];
    });
    return newItem;
  });
  return res;
};



// 데이터를 엑셀 형식으로 변환.
const fnConvertToExcel = (data) => {

  // 데이터에서 새로운 속성을 추출.(결과 > 엑셀값으로 변경)
  const res = fnExtractProperties(data);
  // [{이름: John , 성: Smith ...},{이름: Same , 성: Hamington ...}] 이런 형태로 return 
  
  // 엑셀 워크시트를 생성.
  const worksheet = XLSX.utils.json_to_sheet(res);
  // 엑셀 워크북을 생성합니다.
  const workbook = XLSX.utils.book_new();
  // 워크북에 워크시트를 추가.
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  // 엑셀 버퍼를 생성하여 반환.
  const excelBuffer = XLSX.write(workbook, {bookType: "xlsx", type: "array"});
  
  return excelBuffer;
};



// 엑셀 파일을 다운로드.
const fnDownloadExcel = () => {
  // 데이터를 엑셀 형식으로 변환. (결과 > 엑셀값으로 변경)
  const excelData = fnConvertToExcel(data.value);
  
  // Blob 객체를 생성.
  const blob = new Blob([ excelData ], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
  // Blob URL을 생성.
  const url = window.URL.createObjectURL(blob);
  
  
  // 다운로드 링크를 생성하고 클릭.
  const a = document.createElement("a");
  // 파일 이름을 지정.
  a.download = `Demo-Request-${dayjs(new Date()).format("YYYY-MM-DD")}.xlsx`;
  // Blob URL을 설정.
  a.href = url;
  // 링크를 클릭하여 파일을 다운로드.
  a.click();
  
  // 사용한 리소스를 해제.
  window.URL.revokeObjectURL(url);
};

</script>

 

 

 

4. 결과