Nuxt3 + Exceljs – ブラウザでエクセルファイルを選択した時にWorkbookとして受け取る (アップロードに使いたい)

前提

ブラウザでファイル選択した時に、エクセルファイルの内容をフロント(Nuxt3)で解析して、その内容を元に何らかのアップロード処理的なことをしたい

(エクセルファイル本体を送信するわけではなく、JSONでリクエストするなどしたい)

Exceljs のインストール

npm install exceljs

ファイル例

以下の例では全てのシートの名前と、A1のセルの値を console 出力している

ブラウザでエクセルファイルをファイル選択した時に、
exceljs でワークブックを読み取って、その内容を console 出力してみる

<script lang="ts" setup>
import * as Excel from 'exceljs'

async function fileSelected(event: Event) {
  const target = event.target as HTMLInputElement
  const files = target.files

  if (files && files[0]) {
    const arrayBuffer = await files[0].arrayBuffer()
    const workbook = new Excel.Workbook()
    await workbook.xlsx.load(arrayBuffer)

    workbook.worksheets.forEach((worksheet) => {
      console.log(worksheet.name)
      console.log(worksheet.getCell('A1').value)
    })
  }
}

const fileInput = ref()
</script>

<template>
  <input ref="fileInput" type="file" @change="fileSelected" />
</template>

解説

• ファイルを選択すると File が得られる
• File からバッファが得られる ( File.arrayBuffer() )
• バッファを workbook.xlsx.load でワークブックとして読み込むことが出来る

アップロード処理

workbook を使って fetch とかでてきとうにバックエンド(サーバー)にアップロードする

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

プロフィール・経歴