[NuxtJS]サーバから取得したファイルをダウンロードする方法

NuxtJS のクライアント側からサーバー側へ API を実行してファイルを取得し、そのファイルをダウンロードさせる実装方法をメモしておきます。

前提条件
実装方法
最後に

前提条件

nuxt : ^2.15.8
vue : ^2.6.14
@nuxtjs/axios : ^5.13.6

上記の環境で実装しました。

実装方法

基本的には以下の実装でファイルの取得〜ダウンロードができるようになります。

const params = 'param' // 何か引数があれば設定する

this.$axios.$post('/file/download/api', params, {
  responseType: 'blob'
})
  .then((response) => {
    const fileName = 'ファイル名.xlsx'
    // a タグ生成
    const a = document.createElement('a')
    // href 属性の定義
    a.href = window.URL.createObjectURL(new Blob([response]))
    // download 属性の定義
    a.setAttribute('download', fileName)
    // a タグクリック
    a.click()
    // a タグ削除
    a.remove()
  })
  .catch((err) => {
    throw new Error(err)
  })

最後に

業務系の Web アプリケーションだとエクセルファイルや CSV ファイルのダウンロードは必須になってくるので、今回の実装方法をしっかり覚えておきたいです。