FirebaseのStorageで公開しているPDFをPDF.jsとiframeを使ってHTMLに埋め込み表示したい

Question

やりたいこと

FirebaseのStorageを使って、以下のURLでPDFを公開しています。

https://firebasestorage.googleapis.com/v0/b/test-ad8e8.appspot.com/o/dummy.pdf?alt=media&token=f41af561-fe59-4a3b-88b0-bb4aaa1a1f9e

これを直接iframeのsrcに指定するとスマートフォンで正常に表示されないため、
PDF.jsを使ってHTMLに埋め込みたいと考えています。

質問

以下のURLをiframeのsrcに指定することでHTMLに埋め込むことができると想定していたのですが、

http://localhost:8888/pdfjs/web/viewer.html?file=[https://firebasestorage.googleapis.com/v0/b/test-ad8e8.appspot.com/o/dummy.pdf?alt=media&token=f41af561-fe59-4a3b-88b0-bb4aaa1a1f9e](https://firebasestorage.googleapis.com/v0/b/test-ad8e8.appspot.com/o/dummy.pdf?alt=media&token=f41af561-fe59-4a3b-88b0-bb4aaa1a1f9e)
（※fileパラメータのURLは最初のURLと同じです。）

Invalid PDF Structureと表示されてしまいます。

FirebaseのStorageで公開した場合、厳密にはPDF形式でなくなってしまうのでしょうか。
正常に表示する方法はありますか？

試したこと

同じPDFファイルをStorageではなく、localhostで公開してPDF.jsからアクセスした場合は表示されました。
http://localhost:8888/pdfjs/web/viewer.html?file=http://localhost:8888/dummy.pdf
↑このURLをiframeのsrcに指定した場合は正常に表示されました。

CORSが原因かと思い、gsutilコマンドを使ってStorageのCORSをhttp://localhost:8888に対して許可してみましたが改善しませんでした。
CORSの設定は以下の通りです。

[{
  "origin": ["http://localhost:8888"],
  "responseHeader": ["*"],
  "method": ["GET"],
  "maxAgeSeconds": 86400
}]

ブラウザは、FireFoxとChromeで試して同じ結果でした。

Answer 1

dummy.pdf?alt=media&token=f41af561-fe59-4a3b-88b0-bb4aaa1a1f9e
みたいな感じでURLにクエリパラメータがあるのをうまく渡せていない気がします。

http://localhost:8888/pdfjs/web/viewer.html?file=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Ftest-ad8e8.appspot.com%2Fo%2Fdummy.pdf%3Falt%3Dmedia%26token%3Df41af561-fe59-4a3b-88b0-bb4aaa1a1f9e
上記のURLだとどうでしょうか。

Comments

[退会済みユーザー]

おおー！ありがとうございます！半ば諦めてましたが解決しました！

[aaharu]

よかったです。
クエリに渡す値はURLエンコードする必要があります。
JavaScriptであれば、 `"http://example.com/viewer.html?file=" + encodeURIComponent("PDFのURL")` みたいな感じで encodeURIComponent を使用すれば取得できます。