Vue 언어로 사용해서 CSV 데이터 생성하기

CSV(Comma-Separated Values)는 데이터를 텍스트 형식으로 저장하는 방법 중 하나로, 각 데이터 값이 쉼표로 구분된 파일 형식입니다. Vue.js를 사용하여 데이터를 가져와 CSV 파일로 저장하는 방법을 알아보겠습니다.

1. Vue 컴포넌트 생성

<template>
  <div>
    <button @click="exportToCSV">CSV로 내보내기</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataToExport: [
        ['이름', '나이', '이메일'],
        ['홍길동', 30, 'hong@example.com'],
        ['김철수', 25, 'kim@example.com'],
        ['박영희', 28, 'park@example.com']
        // 실제 데이터는 여기에 있어야 합니다. 예시 데이터로 채워져 있습니다.
      ]
    };
  },
  methods: {
    exportToCSV() {
      const csvContent = 'data:text/csv;charset=utf-8,';

      this.dataToExport.forEach((rowArray) => {
        const row = rowArray.join(',');
        csvContent += `${row}\r\n`;
      });

      const encodedUri = encodeURI(csvContent);
      const link = document.createElement('a');
      link.setAttribute('href', encodedUri);
      link.setAttribute('download', 'exported_data.csv');
      document.body.appendChild(link);
      link.click();
    }
  }
};
</script>

 

2. 코드 설명

• <button>을 클릭하면 exportToCSV 메서드가 호출됩니다.
• dataToExport 배열에는 내보낼 데이터가 포함되어 있습니다. 실제 데이터로 교체하여 사용하세요.
• exportToCSV 메서드는 데이터를 반복하면서 CSV 형식으로 변환하고, 다운로드 링크를 생성하여 사용자에게 파일을 제공합니다.
• 생성된 CSV 파일은 'exported_data.csv'라는 이름으로 다운로드됩니다.

3. 사용 방법

위 코드를 Vue 프로젝트에 추가하고, 실제 데이터를 dataToExport 배열에 삽입하여 사용하면 됩니다. 버튼을 클릭하면 CSV 파일이 다운로드됩니다.

이렇게 Vue.js를 사용하여 간단한 CSV 데이터를 생성하고 다운로드할 수 있습니다. 데이터 포맷에 맞게 코드를 수정하여 사용하시면 됩니다.