Vue3+csvtojsonでCSVアップロードと表表示

やりたいこと

Vue3プロジェクトにCSVファイルをアップロードして表に表示するサイトを作ってみます。csvtojson パッケージを使用してCSVデータをJSONに変換し、Vue.jsコンポーネントで表示します。

csvtojsonインストール

npm install csvtojson

テンプレート

<template>
  <div>
    <!-- ファイルアップロード用のinput要素 -->
    <input type="file" @change="handleFileUpload" />

    <!-- CSVデータを表示する表 -->
    <table v-if="csvData.length > 0">
      <thead>
        <tr>
          <!-- ヘッダー行 -->
          <th v-for="(value, key) in csvData[0]" :key="key">{{ key }}</th>
        </tr>
      </thead>
      <tbody>
        <!-- データ行 -->
        <tr v-for="(row, index) in csvData" :key="index">
          <td v-for="(value, key) in row" :key="key">{{ value }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

スクリプト

<script setup>
import { ref } from 'vue'
import * as csvtojson from 'csvtojson'

const csvData = ref([])

// ファイルアップロード時の処理
const handleFileUpload = (event) => {
  const file = event.target.files[0]

  if (file) {
    const reader = new FileReader()

    reader.onload = async (e) => {
      const content = e.target.result
      // CSVデータをJSONに変換
      csvData.value = await csvtojson().fromString(content)
    }

    reader.readAsText(file)
  }
}
</script>

ヘッダーのないCSVを読み込むとき

csvtojson({ noheader: true })とすればヘッダーなしで1行目からボディに変換されます。

カスタムヘッダー

{ noheader: true }と併せて使う場合が多いと思います。
好きなヘッダーを設定できます。

// カスタムヘッダーの定義
const customHeaders = ['name', 'age'];

// CSVデータをJSONに変換
csvData.value = await csvtojson({ headers: true, headers: customHeaders }).fromString(content)

日本語が文字化けするとき

CSVファイルがShift_JISで保存されていることが原因であることが多いです。その場合はreader.readAsText(file, 'Shift_JIS')として文字コードを指定することで文字化けを防げます。