NuxtでCSVダウンロードを行うには
はじめに
先日、仕事でrails(API) + Nuxtでファイルダウンロード機能を作ったのでメモしておきます。
業務で実装したCSVダウンロードの実装手順をざっくり説明すると、以下のような形となります。
# 実装手順 - 1.nuxtからAPI(rails)を叩く - 2.text/csv形式のデータをrailsから返す - 3.nuxtから返ってきたapiレスポンスデータをダウンロードさせる
今回は3のNuxtからファイルダウンロード処理だけを説明します。
いきなり、結論
フロントエンドの方に教えてもらったのですが、 この記事 が参考になります。(というかそのまんまコピペでイケますね。。)
// バイナリ形式で作成 const blob = new Blob([response.data], { type: "text/csv" }); const url = (window.URL || window.webkitURL).createObjectURL(blob); const a = document.createElement("a"); a.href = url; // download属性をつける a.download = "download.csv"; // aタグ要素を画面に一時的に追加 document.body.appendChild(a); // クリックさせて保存させる a.click();
(参考) download属性とは
aタグにdownload属性をつけて、aタグをクリックするとhrefに指定したファイルをダウンロード出来ます
<a href="./dowload.csv" download>CSVを保存</a> <a href="./hoge.csv" download="download.csv">CSVをdownload.csvという名前で保存</a>
