vue.js 3.0 xlsx export

 

네.. 코로나에 걸렸습니다. 새로운 프로젝트 시작일에 양성이 나와 일정이 일주일 밀렸습니다. 야근으로 채워야합니다 👻

 

테이블 라이브러리 중에 Ag-Grid라는 훌륭한 라이브러리가 있는데요. Excel 내보내기 기능은 유료버전에서만 사용할 수 있어 따로 만들어봤습니다. xlsx 라이브러리를 사용하면 JSON 형식의 데이터를 xlsx 확장자로 변환해 다운로드 기능을 구현할 수 있습니다.

 

다른 테이블 라이브러리를 사용하거나 객체 배열의 데이터를 xlsx 형식으로 변환시킬 수 있습니다. 셀 스타일이나 셀 병합 등 까다로운 작업이 필요하다면 sheet.js가 아닌 excel.js를 사용하는 편이 좋습니다.

 

 

1. 설치

npm i xlsx

 

 

2. 전체코드

<template>
  <button @click="getExcel">Excel Download</button>
  <ag-grid-vue ref="gridRef"
    style="width: 500px; height: 200px"
    class="ag-theme-alpine"
    :columnDefs="columnDefs"
    :rowData="rowData"
  >
  </ag-grid-vue>
</template>

<script>
import { ref } from 'vue'
import "ag-grid-community/dist/styles/ag-grid.css"
import "ag-grid-community/dist/styles/ag-theme-alpine.css"
import { AgGridVue } from "ag-grid-vue3"
import * as XLSX from 'xlsx/xlsx.mjs';

export default {
  name: "App",
  setup() {
    const gridRef = ref(null); //aggrid body
    const columnDefs = [
      { headerName: "Make", field: "make" },
      { headerName: "Model", field: "model" },
      { headerName: "Price", field: "price" },
    ];
    const rowData = ref([
      { make: "Toyota", model: "Celica", price: 35000 },
      { make: "Ford", model: "Mondeo", price: 32000 },
      { make: "Porsche", model: "Boxter", price: 72000 },
    ]);

    const getExcel = () => {
      const data = gridRef.value.rowData; //AG-Grid Data
      const wb = XLSX.utils.book_new();
      const ws = XLSX.utils.json_to_sheet(data);      //JSON to Sheet
      XLSX.utils.book_append_sheet(wb, ws, 'sheet1'); //시트 생성
      XLSX.writeFile(wb, 'result.xlsx'); //xlsx 다운로드
    }

    return {
      gridRef,
      columnDefs,
      rowData,
      getExcel,
    };
  },
  components: {
    AgGridVue,
  },
};
</script>

 

 

3. 내보내기 코드

    const getExcel = () => {
      const data = gridRef.value.rowData; //AG-Grid Data
      const wb = XLSX.utils.book_new();
      const ws = XLSX.utils.json_to_sheet(data);      //JSON to Sheet
      XLSX.utils.book_append_sheet(wb, ws, 'sheet1'); //시트 생성
      XLSX.writeFile(wb, 'result.xlsx'); //xlsx 다운로드
    }

 

Ag-grid를 사용하지 않는다면 json_to_sheet() 매개변수로 객체 배열 형식으로 데이터를 넣어주면 끝!

저작자표시 비영리 변경금지