🖥
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オープンチャットもご利用ください。
プロフィール・経歴
公開日時
2024-02-29
Discussion