質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

1回答

2661閲覧

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

Khy

総合スコア118

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

1クリップ

投稿2020/02/05 10:28

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>

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

解決済みでしたらすみません。同じところでつまづいていたのですが、最低限の実装はできました。
私は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

honyao

総合スコア40

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問