Javascript

[Javascript] JSON 데이터 엑셀 다운로드 하기

eulBlue 2024. 5. 22. 09:29

📱테스트 환경

"nuxt": "^3.11.2"
"vue": "^3.4.21"
"vue-router": "^4.3.0"

테이블에 보이는 데이터들을 엑셀 다운로드 하는 기능이 필요해서

 

xlsx

SheetJS Spreadsheet data parser and writer. Latest version: 0.18.5, last published: 2 years ago. Start using xlsx in your project by running `npm i xlsx`. There are 4486 other projects in the npm registry using xlsx.

www.npmjs.com

해당 라이브러리를 사용하기로 했다.

사용방법은 엄청 간단하지만 어디에선가 또 사용할 수도 있기 때문에

함수로 만들어놓고 json 데이터를 받아서 엑셀 다운로드 하는 기능을 만들었다.

코드는 다음과 같다.

npm install xlsx
import * as XLSX from "xlsx";

export const excelDownload = (json: any[]) => {
  if (json.length > 0) {
    const worksheet = XLSX.utils.json_to_sheet(json);

    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
    XLSX.writeFile(workbook, "store.xlsx");
  } else {
    alert("데이터가 없습니다.");
  }
};

코드는 간단하다.

1-1. json 데이터가 있는지 확인 → 없다면 alert 띄워주기 END

1-2. json 데이터가 있다면   json 데이터를 워크시트로 변환

2. book_new 함수를 사용하여 워크북 생성

3. writeFile 함수를 사용하여 Excel 파일을 생성 후 다운로드