はじめに
Vue2とVuetifyでローカルのCSVファイルをテーブルに表示してみました。
実装の流れは以下の通りです。
- Vueプロジェクトの作成
- papaparseライブラリのインストール
- CSVファイルを選択するinput要素と表示するテーブルの作成
- CSVファイルを読み込むハンドラーメソッドの作成
開発環境
- Windows 11
- Vue CLI 5.0.8
- Vue 2.7.14
- npm 6.14.14
- Node.js 14.17.5
実装
Vueプロジェクトの作成
Vue CLIを使ってVueプロジェクトを作成します。
vue create フォルダ名（任意）
作成したプロジェクトがあるフォルダに移動し、以下のコマンドを実行して、Vuetifyを追加します。
vue add vuetify
途中でプリセットの選択を聞かれるので、Default(recommended)を選択します。
今回は、Vueプロジェクト内のHelloWorld.vueを編集していきます。最初に、デフォルトで生成されるコードを削除し、templateタグとscriptタグのみを残してください。
<template>
</template>
<script>
</script>
papaparseライブラリのインストール
papaparseは、CSVファイルの解析を簡単に扱えるライブラリです。
まずは、以下のコマンドでpapaparseをインストールします。
npm install papaparse --save
script開始タグの直下でpapaparseをインポートします。
import Papa from 'papaparse'
ファイルを選択するinput要素と表示するテーブルの作成
HelloWorld.vueのtemplateタグを以下のように書き換えます。
input要素のtype属性を"file"にすることで、ファイルをアップロードできるようになります。また、ファイルが選択された際には@changeイベントを介してhandleFileUploadメソッドが呼び出されます。このhandleFileUploadメソッドは後ほど作成します。
v-data-tableタグを使用することで、テーブルを配置できます。:headers属性は、テーブルの列名を定義した配列で、:items属性はテーブルの行データを定義した配列です。これらのプロパティは、scriptタグのdata内で定義します。
<template>
<div>
<input type="file" @change="handleFileUpload" />
<v-data-table :headers="headers" :items="items" />
</div>
</template>
<script>
import Papa from 'papaparse'
export default {
data() {
return {
headers: [],
items: []
}
}
}
</script>
CSVファイルを読み込むハンドラーメソッドの作成
次に、handleFileUploadメソッドを作成します。1行目をヘッダーとして使用し、2行目以降をitemsプロパティに入れます。
<template>
<div>
<input type="file" @change="handleFileUpload" />
<v-data-table :headers="headers" :items="items" />
</div>
</template>
<script>
import Papa from 'papaparse'
export default {
data() {
return {
headers: [],
items: []
}
},
//以下、methodsを追加
methods: {
handleFileUpload(event) {
const file = event.target.files[0]
Papa.parse(file, {
header: true,
complete: (results) => {
this.headers = Object.keys(results.data[0]).map((key) => ({
text: key,
value: key
}))
this.items = results.data
}
})
}
}
}
</script>
ここまで終えると、実装は完了です。テーブルに表示してみましょう。
「ファイルを選択」をクリックし、任意のCSVファイルをアップロードします。
アップロードが完了すると、以下のようにテーブルに表示されます。
おわりに
今回は、Vue2とVuetifyを使用して、ローカルのCSVファイルをテーブルに表示してみました。
papaparseというライブラリを使用することで、CSVを簡単に解析することができました。ライブラリを使うことで、開発のハードルを下げることができますね。ぜひ使ってみてください。