【Vue.js】CSVファイルを読み込んで表示する方法｜アップロード＋テーブル表示

// NG: これは壊れる
const rows = text.split('\n').map(row => row.split(','))

// 入力
// 名前,住所
// "山田, 太郎","東京都
// 新宿区"

// split(',') の結果：1行目は 2 列だが、2行目は
// ['"山田', ' 太郎"', '"東京都'] になり、列も行もずれる

// utils/parseCsv.js
// 引用符で囲まれたカンマ・改行・"" （引用符のエスケープ）に対応した簡易パーサ
export function parseCsv(text, delimiter = ',') {
  const rows = []
  let row = []
  let cell = ''
  let inQuotes = false

  for (let i = 0; i < text.length; i++) {
    const c = text[i]

    if (inQuotes) {
      if (c === '"') {
        if (text[i + 1] === '"') {
          cell += '"' // "" は " 1文字
          i++
        } else {
          inQuotes = false
        }
      } else {
        cell += c // 引用符の中は、カンマも改行もそのまま
      }
    } else if (c === '"') {
      inQuotes = true
    } else if (c === delimiter) {
      row.push(cell)
      cell = ''
    } else if (c === '\n' || c === '\r') {
      if (c === '\r' && text[i + 1] === '\n') i++ // CRLF
      row.push(cell)
      rows.push(row)
      row = []
      cell = ''
    } else {
      cell += c
    }
  }

  // 末尾に改行がないファイルの最後の行
  if (cell !== '' || row.length) {
    row.push(cell)
    rows.push(row)
  }

  // 空行だけ取り除く（1列のCSVは残す）
  return rows.filter((r) => !(r.length === 1 && r[0] === ''))
}

// utils/decodeCsv.js
// UTF-8として厳密に読めなければ、Shift_JISとして読み直す
export function decodeCsv(buffer) {
  try {
    // fatal: true なら、不正なバイト列で例外になる。BOMは自動で取り除かれる
    return new TextDecoder('utf-8', { fatal: true }).decode(buffer)
  } catch {
    return new TextDecoder('shift_jis').decode(buffer)
  }
}

<script setup>
import { ref, computed } from 'vue'
import { parseCsv } from '@/utils/parseCsv'
import { decodeCsv } from '@/utils/decodeCsv'

const MAX_ROWS = 200 // 画面に出す最大行数
const rows = ref([])
const fileName = ref('')
const error = ref('')

async function onFileChange(event) {
  const file = event.target.files[0]
  if (!file) return
  error.value = ''

  try {
    const buffer = await file.arrayBuffer()
    const parsed = parseCsv(decodeCsv(buffer))
    if (!parsed.length) throw new Error('empty')
    rows.value = parsed
    fileName.value = file.name
  } catch (e) {
    rows.value = []
    error.value = 'CSVを読み込めませんでした。ファイルの内容を確認してください。'
  }
}

const headers = computed(() => rows.value[0] ?? [])
const body = computed(() => rows.value.slice(1, MAX_ROWS + 1))
const total = computed(() => Math.max(rows.value.length - 1, 0))
</script>

<template>
  <div>
    <input type="file" accept=".csv,text/csv" @change="onFileChange" />
    <p v-if="error" role="alert">{{ error }}</p>

    <template v-if="rows.length">
      <p>{{ fileName }}：{{ total }}行（先頭{{ body.length }}行を表示）</p>
      <table>
        <thead>
          <tr>
            <th v-for="(h, i) in headers" :key="i">{{ h }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, r) in body" :key="r">
            <td v-for="(_, c) in headers" :key="c">{{ row[c] }}</td>
          </tr>
        </tbody>
      </table>
    </template>
  </div>
</template>

import Papa from 'papaparse'

function parse(file) {
  Papa.parse(file, {
    header: true,          // 1行目を列名にして、各行をオブジェクトにする
    skipEmptyLines: true,  // 空行を無視
    encoding: 'Shift_JIS', // Fileを読むときの文字コード
    complete: (result) => {
      console.log(result.meta.fields) // 列名
      console.log(result.data)        // [{ 名前: '...', 住所: '...' }, ...]
      console.log(result.errors)      // 列数の不一致などのエラー
    }
  })
}