teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問FirebaseのStorageで公開しているPDFをPDF.jsとiframeを使ってHTMLに埋め込み表示したい

編集履歴

質問編集履歴

11

文章の修正

2020/04/01 03:13

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -46,12 +46,30 @@
46
46
 
47
47
  http://localhost:8888/pdfjs/web/viewer.html?file=http://localhost:8888/dummy.pdf
48
48
 
49
- ↑このURLでは正常に表示されました。
49
+ ↑このURLをiframeのsrcに指定した場合は正常に表示されました。
50
50
 
51
51
 
52
52
 
53
53
  CORSが原因かと思い、gsutilコマンドを使ってStorageのCORSをhttp://localhost:8888に対して許可してみましたが改善しませんでした。
54
54
 
55
+ CORSの設定は以下の通りです。
56
+
57
+ ```cors.json
58
+
59
+ [{
60
+
61
+ "origin": ["http://localhost:8888"],
62
+
63
+ "responseHeader": ["*"],
64
+
65
+ "method": ["GET"],
66
+
67
+ "maxAgeSeconds": 86400
68
+
69
+ }]
70
+
71
+ ```
72
+
55
73
 
56
74
 
57
75
  ブラウザは、FireFoxとChromeで試して同じ結果でした。

10

文章の修正

2020/04/01 03:12

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -50,7 +50,7 @@
50
50
 
51
51
 
52
52
 
53
- CORSが原因かと思い、gsutilコマンドを使ってStorageのCORSをhttp://localhost:8888や、https://firebasestorage.googleapis.comに対して許可してみましたが改善しませんでした。
53
+ CORSが原因かと思い、gsutilコマンドを使ってStorageのCORSをhttp://localhost:8888に対して許可してみましたが改善しませんでした。
54
54
 
55
55
 
56
56
 

9

文章の修正

2020/03/31 13:17

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- FirebaseのStorageで公開しているPDFをPDF.jsを使ってHTMLに埋め込み表示したい
1
+ FirebaseのStorageで公開しているPDFをPDF.jsとiframeを使ってHTMLに埋め込み表示したい
test CHANGED
@@ -44,15 +44,13 @@
44
44
 
45
45
  同じPDFファイルをStorageではなく、localhostで公開してPDF.jsからアクセスした場合は表示されました。
46
46
 
47
+ http://localhost:8888/pdfjs/web/viewer.html?file=http://localhost:8888/dummy.pdf
48
+
47
- 以下のようなURLです。
49
+ ↑このURLでは正常に表示されました。
48
50
 
49
51
 
50
52
 
51
- http://localhost:8888/pdfjs/web/viewer.html?file=http://localhost:8888/dummy.pdf
52
-
53
-
54
-
55
- gsutilコマンドを使ってStorageのCORSをlocalhost:8888に対して許可してみましたが改善しませんでした。
53
+ CORSが原因かと思い、gsutilコマンドを使ってStorageのCORSをhttp://localhost:8888や、https://firebasestorage.googleapis.comに対して許可してみましたが改善しませんでした。
56
54
 
57
55
 
58
56
 

8

文章の修正

2020/03/31 13:16

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -42,8 +42,18 @@
42
42
 
43
43
  ## 試したこと
44
44
 
45
- - 同じPDFファイルをStorageではなく、localhostで公開してPDF.jsからアクセスした場合は表示されました。
45
+ 同じPDFファイルをStorageではなく、localhostで公開してPDF.jsからアクセスした場合は表示されました。
46
46
 
47
- - gsutilコマンドを使ってStorageのCORSをlocalhost:8888に対して許可しましたが改善しませんでした。
47
+ 以下のようなURLです。
48
48
 
49
+
50
+
51
+ http://localhost:8888/pdfjs/web/viewer.html?file=http://localhost:8888/dummy.pdf
52
+
53
+
54
+
55
+ gsutilコマンドを使ってStorageのCORSをlocalhost:8888に対して許可してみましたが改善しませんでした。
56
+
57
+
58
+
49
- - ブラウザは、FireFoxとChromeで試しましたが同じ結果でした。
59
+ ブラウザは、FireFoxとChromeで試して同じ結果でした。

7

文章の修正

2020/03/31 13:13

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,5 @@
1
+ ## やりたいこと
2
+
1
3
  FirebaseのStorageを使って、以下のURLでPDFを公開しています。
2
4
 
3
5
 
@@ -6,7 +8,13 @@
6
8
 
7
9
 
8
10
 
11
+ これを直接iframeのsrcに指定するとスマートフォンで正常に表示されないため、
12
+
9
- PDF.jsとiframeを使ってHTMLに埋め込みたいと考えています。
13
+ PDF.jsを使ってHTMLに埋め込みたいと考えています。
14
+
15
+
16
+
17
+ ## 質問
10
18
 
11
19
  以下のURLをiframeのsrcに指定することでHTMLに埋め込むことができると想定していたのですが、
12
20
 
@@ -28,6 +36,8 @@
28
36
 
29
37
  FirebaseのStorageで公開した場合、厳密にはPDF形式でなくなってしまうのでしょうか。
30
38
 
39
+ 正常に表示する方法はありますか？
40
+
31
41
 
32
42
 
33
43
  ## 試したこと

6

文章を修正

2020/03/31 13:09

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -6,9 +6,9 @@
6
6
 
7
7
 
8
8
 
9
- PDF.jsを使って公開したいと考えています。
9
+ PDF.jsとiframeを使ってHTMLに埋め込みたいと考えています。
10
10
 
11
- 以下のURLにアクセスすると公開できると想定していたのですが、
11
+ 以下のURLをiframeのsrcに指定することでHTMLに埋め込むことができると想定していたのですが、
12
12
 
13
13
 
14
14
 
@@ -18,7 +18,7 @@
18
18
 
19
19
 
20
20
 
21
- Invalid PDF Structureと表示され、公開できません。
21
+ Invalid PDF Structureと表示されてしまいます。
22
22
 
23
23
 
24
24
 

5

タイトルを修正

2020/03/31 13:04

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- FirebaseのStorageで公開しているPDFをPDF.jsを使って表示したい
1
+ FirebaseのStorageで公開しているPDFをPDF.jsを使ってHTMLに埋め込み表示したい
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- PDF.jsを使って、スマートフォン向けにも公開したいと考えています。
9
+ PDF.jsを使って公開したいと考えています。
10
10
 
11
11
  以下のURLにアクセスすると公開できると想定していたのですが、
12
12
 

4

試したこと修正

2020/03/31 13:00

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -32,12 +32,8 @@
32
32
 
33
33
  ## 試したこと
34
34
 
35
+ - 同じPDFファイルをStorageではなく、localhostで公開してPDF.jsからアクセスした場合は表示されました。
36
+
35
37
  - gsutilコマンドを使ってStorageのCORSをlocalhost:8888に対して許可しましたが改善しませんでした。
36
38
 
37
-
38
-
39
- - 別のPDFファイルを同じように公開して試しましたが、同様の結果でした。
40
-
41
- - FireFoxとChromeで試しましたが同じ結果でした。
39
+ - ブラウザは、FireFoxとChromeで試しましたが同じ結果でした。
42
-
43
- - 同じPDFファイルをStorageではなく、localhostで公開してPDF.jsからアクセスした場合は表示されました。

3

リンクを追加

2020/03/31 12:13

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,9 @@
12
12
 
13
13
 
14
14
 
15
- 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
15
+ 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)
16
+
17
+ （※fileパラメータのURLは最初のURLと同じです。）
16
18
 
17
19
 
18
20
 

2

試したこと追加

2020/03/31 12:11

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -36,6 +36,6 @@
36
36
 
37
37
  - 別のPDFファイルを同じように公開して試しましたが、同様の結果でした。
38
38
 
39
-
39
+ - FireFoxとChromeで試しましたが同じ結果でした。
40
40
 
41
41
  - 同じPDFファイルをStorageではなく、localhostで公開してPDF.jsからアクセスした場合は表示されました。

1

リンクに変更

2020/03/31 12:09

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- https://firebasestorage.googleapis.com/v0/b/test-ad8e8.appspot.com/o/dummy.pdf?alt=media&token=f41af561-fe59-4a3b-88b0-bb4aaa1a1f9e
5
+ [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)
6
6
 
7
7
 
8
8