firebaseのStorageからファイルを取得( Vue, Nuxt, TypeScript)

firebaseのStorageからファイルを取得

業務でStorageからcsvファイルを取得することになり備忘録としてかきこ

公式にすべて記載あり

firebaseの公式に記載ありますが、こちとら業務で取得確認までしなきゃなのでやり方を下記に記載して自身のやり方を残しておきます。

取得はコンソールのStorageに記載あるgs://hogehoge~~.comを利用して取得

import {
  getDownloadURL,
  getStorage,
　ref
} from 'firebase/storage'

  const getCsv = async () => {
　　const storage = getStorage()
  　const gerUrl = `gs://${bucket}/20240627fileName.csv`
  　const gsReference = ref(storage, gerUrl)

    const url = await getDownloadURL(gsReference)
    const response = await fetch(url)

    // Shift_JISでエンコーディング
    const arrayBuffer = await response.arrayBuffer()
    const decoder = new TextDecoder('Shift_JIS')
    const csvText = decoder.decode(arrayBuffer)
    const data = csvText.trim().split('\n')

    console.log(data)
    // CSVデータがログに表示される。
  }

今回CSVのエンコードに仕様したのは下記
https://www.npmjs.com/package/text-encoding

CSVだと保存形式が所々違うのでエンコーディングする必要があります。

ただファイルや画像を取得するだけならresponse.text()でURLをstringで表示できるので、
各コンポーネントでURL表示してあげればいいのかなと.