【Vue.js】Excelファイルをアップロードして解析する方法｜xlsxライブラリの使い方

業務系Webアプリでは、ユーザーがExcelファイル（.xlsx）をアップロードしてデータを読み取り、画面に表示したりDBに登録したりする機能が求められることがあります。Vue.jsとxlsxライブラリを組み合わせれば、ローカルでExcelファイルを解析し、テーブル形式で内容を表示する処理を簡単に実装できます。この記事ではその基本構成を紹介します。

必要なライブラリのインストール
Excelファイル読み込みの流れ
Vueコンポーネントのサンプル実装
補足：複数シートに対応したい場合
注意点と活用のヒント
まとめ

必要なライブラリのインストール

npm install xlsx

ライブラリ「xlsx」は、Excelファイルの読み書きに対応した人気のJSツールです。

Excelファイル読み込みの流れ

<input type=”file”> でExcelファイルを選択
FileReaderでバイナリデータを取得
xlsxライブラリでJSONに変換
テーブルで表示

Vueコンポーネントのサンプル実装

<template>
  <div>
    <input type="file" accept=".xlsx" @change="handleFileUpload" />

    <table v-if="excelData.length" border="1" cellpadding="8">
      <thead>
        <tr>
          <th v-for="(key, index) in Object.keys(excelData[0])" :key="'th-' + index">
            {{ key }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in excelData" :key="'row-' + rowIndex">
          <td v-for="(value, key) in row" :key="'cell-' + key">
            {{ value }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

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

const excelData = ref([])

const handleFileUpload = (event) => {
  const file = event.target.files[0]
  if (!file) return

  const reader = new FileReader()

  reader.onload = (e) => {
    const data = new Uint8Array(e.target.result)
    const workbook = XLSX.read(data, { type: 'array' })
    const sheetName = workbook.SheetNames[0]
    const worksheet = workbook.Sheets[sheetName]
    const json = XLSX.utils.sheet_to_json(worksheet)
    excelData.value = json
  }

  reader.readAsArrayBuffer(file)
}
</script>