[VueJS] vue-json-csv 사용해보기

csv 기능 구현 중 npm이 있을까? 하고 검색해보았는 데 있었다.

어지간한 건 다 있는 듯하다.

json 형식의 데이터를 csv 파일로 생성해준다.

---

> 설치 방법

npm install vue-json-csv

https://www.npmjs.com/package/vue-json-csv

vue-json-csv

 

> 적용

적용은 NuxtJS 기반 프로젝트에 적용했고, 아래와 같이 적용했다.

plugins 디렉터리에 vue-json-csv.js 파일 생성 후 코드 작성

import Vue from 'vue';
import JsonCsv from 'vue-json-csv'

Vue.component('csvDownload', JsonCsv);

이후 프로젝트 내에 적용을 위해 nuxt.config.js에 코드 작성

이렇게 공용 컴포넌트로 적용시켰다.

 

> 사용

사용법은 간단하다.

사용한 데이터는 ElasticSearch에서 가져온 데이터를 사용했다.

<csv-download 
  :data="list" 
  :fields="csvFields" 
  :labels="csvHeaders"
  :name="csvName">
  <v-btn>vue-json-csv를 이용한 csv 파일 생성</v-btn>
</csv-download>

 

안에 props의 각 역할은

:data => csv에 넣을 데이터 (json 형식)

:fields => csv에 표시할 필드 (이 속성을 넣지 않으면 데이터의 모든 필드를 표시해준다.)

:labels => csv 헤더 컬럼에 표시할 데이터 

:name => csv 생성시 만들어질 파일명

이외에도 다른 속성들이 더 있고, 난 4개만 사용해보았다.

아래 스샷을 참고.

4개 속성을 다 지정했을 때

name속성을 제거하면 data.csv라는 파일명으로 생성된다.

labels 속성 제거시 컬럼 헤더값이 데이터 필드값 그대로 표시된다.

fields 속성 제거시 데이터의 모든 필드를 표시한다.

labels와 fields에 대한 사용 방법은 아래 소스를 참고.

 

> 전체 소스 및 화면

<template>
  <v-card>
    <v-card-title>ElasticSearch 데이터 csv 파일로 받기</v-card-title>
    <v-card-text>
      <csv-download 
        :data="list" 
        :fields="csvFields" 
        :labels="csvHeaders"
        :name="csvName">
        <v-btn>vue-json-csv를 이용한 csv 파일 생성</v-btn>
        <!-- list 안에 들어있는 데이터들로 csv 파일을 생성 -->
      </csv-download>
    </v-card-text>
    <v-card-text>
      <v-data-table
        :headers="headers"
        :items="list"
        :page.sync="page"
        :item-per-page="itemsPerPage"
        hide-default-footer
        @page-count="pageCount = $event"
        :search="search"
        height="550"
        no-data-text="데이터가 없습니다."
      ></v-data-table>
      <div class="text-center">
        <v-pagination v-model="page" :length="pageCount"></v-pagination>
      </div>
    </v-card-text>
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      page: 1,
      pageCount: 0,
      itemsPerPage: 10,
      csvName: 'vue-json-csv.csv',
      csvFields: [ //csv 파일에 입력시킬 필드
        'test_mk_dt',
        'name',
        'age',
        'test_ip',
        'test_port',
        'is_use',
      ],
      csvHeaders:{ //헤더 컬럼 필드 한글 매핑
        test_mk_dt : '생성일',
        name : '이름',
        age : '나이',
        test_ip : '아이피',
        test_port : '포트',
        is_use : '사용여부'
      },
      headers: [
        { text: '생성일', value: 'test_mk_dt' },
        { text: '이름', value: 'name' },
        { text: '나이', value: 'age' },
        { text: '아이피', value: 'test_ip' },
        { text: '포트', value: 'test_port' },
        { text: '사용여부', value: 'is_use' }
      ],
    }
  },
  created() {
    const params = {
      test:''
    }
    this.$store.dispatch('csv/initList', params);
  },
  computed: {
    list() {
      return this.$store.getters['csv/GET_LIST'];
    }
  },
}
</script>

<style>

</style>

 

사용 방법은 생각보다 간단했고, 속성도 필요한 속성은 적당히 있다.

인코딩 타입의 경우 따로 지정해주지 않으면 UTF-8이 기본 값으로 지정이 된다.