Vue.js で CSV ファイルの読み込み

March 16, 2020

概要

Vue.js で CSV ファイルからデータを読み込みしたい場合の一例。

サンプルの CSV を用意

以下のような CSV ファイルを src フォルダ配下の assets/data.csv に配置します。

id,first name,last name,age
1,taro,tanaka,20
2,jiro,suzuki,18
3,ami,sato,19
4,yumi,adachi,21

CSV ファイルの読み込み

あとは作成した CSV ファイルを fetch 関数を使って読み込んでやるだけです。

import data from "./data/data.csv";

export default {
  data() {
    return {
      result: []
    };
  },
  created() {
    fetch(data)
      .then(res => res.text())
      .then(data => (this.result = this.convertCsvStringToArray(data)));
  },
  methods: {
    convertCsvStringToArray(str) {
      return str.split("\n").map(s => s.split(","));
    }
  }
};