cloud storageにあげたPDFファイルをダウンロードしたい

FirebaseとNuxt.jsでWebアプリを制作しております。

Clooud StorageにPDFファイルをアップロードし、そのダウンロードURLをFirestoreに保存しています。

ダウンロードURLは以下のようになっています。
https://firebasestorage.googleapis.com/v0/b/PROJECT_NAME.appspot.com/o/〇〇〇〇.pdf?alt=media&token=〇〇〇〇

Nuxt.jsでボタンを押したらこのPDFファイルをダウンロードさせたいのですが、現状ボタンをクリックしたら画面上にPDFが表示されてしまい、ダウンロードできません。

ダウンロードボタンのコードは以下のようになっており、item.urlに上記のURLが入っています。

<a :href="item.url" download>ダウンロード</a>

ボタンクリックでダウンロードするにはどのようにしたらいいのでしょうか？？

行動規範の内容に同意します

回答1件

解決済みでしたらすみません。同じところでつまづいていたのですが、最低限の実装はできました。
私はReactのwebアプリをFirebase Hostingで公開して、storageと連携させています。

storageRef.getDownloadURL()で得られたurl(item.url)は、storageのファイルへの参照であり、ファイルの実体を指し示すものではないようです。同じサービスではありますが、hostingのサーバとstorageのサーバは異なるので、hostingのサーバ内にファイルのデータがないとダウンロードできないと理解しました。少し曖昧ですが。

したがって、httpリクエストでファイルのデータを取得します。しかし、サーバが異なるので(origin,ドメインも異なる)、セキュリティ上、CORSの設定でエラーになります。これを解決するには、googleが提供するgsutilというツールでCORS設定を書き換える必要があります。
gsutilのインストール時の設定で、Python2系が既にインストールされていたらbundledのチェックを外します。インストールされていない場合はチェックを入れます。windowsの例ですが、環境変数の設定も確認してください。
CLOUDSDK_PYTHONという環境変数に、python.exeまでのパスを設定します。

CORSの設定が正しく完了すると、httpリクエストでstorageからデータを取得できるようになります。公式のままですが、以下のようにして取得します。

getBlob = () => {
    // urlは質問中のitem.urlです
    const url = item.url
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = event => {
        // blobがファイルのデータです
        const blob = xhr.response;
        // aタグをつくります※この辺は自由にアプリに合わせてください
        const aDL = document.createElement('a');
        // ファイルデータに紐づくダウンロードリンクを設定します
        aDL.href = URL.createObjectURL(blob);
        aDL.textContent = 'download link';
        aDL.setAttribute('download', 'ファイル名.pdf');
    };
    xhr.open('GET', url);
    xhr.send();
};

ファイルのデータをBlobオブジェクトで取得したら、URL.createObjectURL(blob);の部分で、取得したデータへのurlを生成しています。これを<a>タグのhref属性に設定し、download属性も追加します。これでwebアプリ内のダウンロードリンクをクリックすると、即座にstorageから該当ファイルがダウンロードされます。pdfとtxtで動作確認しました。
ざっくりとした回答なので、不明点などございましたらご指摘ください。
環境が異なるかと思いますが、参考になれば幸いです。

####参考リンク
Cloud Storage for Firebaseのよく使うのまとめ(クライアント/Admin) - くらげになりたい。

・公式ドキュメントです。「CORSの構成」と「URL 経由でデータをダウンロードする」を参照
ウェブでファイルをダウンロードする | Firebase

・gsutilのダウンロードとインストール
gsutil をインストールする

・gsutilの環境変数について
gcloud - why am i getting (gsutil): "C:\Users\user\AppData\Local\Programs\Python\Python37\python.exe": command not found - Stack Overflow

Firebase StorageにCORSの設定をする - Qiita

・blobとURL.createObjectURL()の使い方
ファイルをダウンロード保存する方法 - JavaScript の基本 - JavaScript 入門

投稿2020/04/29 16:15