Android端末でPDFを表示するには「PDF.js」

2019/04/23 What's Up, サイト制作, 技術系 投稿者:竹内

前回、PDFをLightbox風に表示する『LightWindow』(Androidはキビしい。。)という記事を書きましたが、今回はこちらの検証時の障害となった「Android端末ではブラウザ内にPDFはそのまま表示されない」部分を解決できればと思います。

調べたところによりますと、AndroidのOSの機能としてPDFをそのまま開くことはできず「別途PDFビューワーを使用して下さい。」というスタンスのようです。
みなさんも経験があると思いますが、確かにAndroid端末でPDFをみようとすると一度端末へダウンロードを行い別途ビューワー等で表示する必要があります。
このままでは、PDFの中に有用な情報があったとしてもうまく開けなかった事による機会損失になりかねません。
また、ダウンロードでは端末の容量を消費しますし「良いPDFビューワーを導入して見てくださいね」と閲覧者に余分なアプリを導入させるのはWeb技術者としてはいかがなものかと思います。

PDF.jsであればAndroidでもブラウザ内でPDFを表示できる

PDF.jsが良いらしいとの事ですので、Android端末でダウンロードすることなくPDFを表示することを目標にします。
PDF.jsはPDFをブラウザで表示できるようにレンダリングをしてくれるスクリプトです。

PDF.jsのダウンロードと実装

PDF.js
https://mozilla.github.io/pdf.js/getting_started/#download

公式サイトからファイルをダウンロードして実装します。
ダウンロードしたファイルを展開し、フォルダを「pdfjs」とリネームしてcommonに配置しました。
「pdfjs」内の「Web」フォルダの中の「viewer.html」をブラウザで表示するだけでPDFが立ち上がります。
目的のPDFを立ち上げるには「viewer.html」と同じ階層にPDFを配置し、「viewer.html?file=nedia.pdf」こんな感じにパスで指定してあげます。
PDF.jsはフォルダ内で動作するのでjQuery等は必要ありません。

HTML

レンダリングに時間がかかるようでちょっと待ちますが無事表示されました。PCでもiOSでもAndroidでも無事表示されています。

Android端末でピンチ(指での拡大縮小)ができない!

当ブログを社内で投稿前に確認して頂いたところ「Android端末でピンチ(指での拡大縮小)ができない!」と指摘を受けました。
動作確認をしてみると確かにできません。

追加で調査を行ったところ、「pdfjs」内の「Web」フォルダの中の「viewer.html」の記述の中に「maximum-scale=1」と記述がありましたので、こちらを消したところAndroid端末でもピンチが動作しました。(iOSではこちらの記述に関係なくピンチ動作に問題はありませんでした。)

まとめ

前回はPDFをLightBox風に表示するのが目的だったのですが、それ以前にAndroid端末でダウンロードすることなくブラウザ内で表示することの方が重要です。
今回の検証によりAndroidでのPDF表示が意外にも大変だと言うことに気づきました。
今後のサイト制作や現在PDFを多様しているサイトで今回の検証が活かせればと思います。

Windows 7 の延長サポート終了まで

days
1
1
7
hours
0
7
minutes
3
1
seconds
5
6

Office 2010 の延長サポート終了まで

days
3
9
0
hours
0
7
minutes
3
1
seconds
5
6

カレンダー

      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
    123
45678910
11121314151617
18192021222324
25262728   
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
   1234
567891011
12131415161718
19202122232425
262728    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

U・Iターン転職しませんか?
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)