【React Native】Android端末でWebViewのPDFを表示する

2020年11月8日

こんにちは！

今回は「React NativeでAndroidのWebView + PDFを表示する」方法について、お伝えしたいと思います。

React Native＋Expoを使用して開発していますが、React Nativeの機能の部分なので、やり方は同じかと思われます。

他にもっと良いやり方があれば共有願います。

背景：AndroidでWebview + PDFは表示できない！？

まず、AndroidではWebviewのPDF表示に対応していません。

React NativeでWebviewを実装して、URLにPDFのリンクを指定しても、表示されませんでした。

Androidにおいて、WebviewのPDF表示に対応していないのであれば、書き方をいくら見直してもダメでしたね（笑）

公式の情報は見つけられませんでしたが、こちらの記事を参考にさせていただいております。

解決策：Googleドキュメントビューア(Google Docs Viewer)を使用して、表示する

別の角度で解決策を探した結果、Googleドキュメントビューア(Google Docs Viewer)を使用することで、表示できました！

実装方法

Googleドキュメントビューアで表示する場合、元々のURLを加工して上げる必要があります。

実装手順

①encodeURI関数を用いて、URLをエンコード

②ドキュメントビューア用URL = https://docs.google.com/viewer?url= + エンコード後Url + &embedded=true

③Webviewにドキュメントビューア用URLを指定する

// WebviewでPDFを表示する
import React from 'react';
import {Platform} from 'react-native';
import {WebView} from 'react-native-webview';
export default function chatPdf() {
  let pdfUrl;
  if (Platform.OS == 'ios') {
    pdfUrl = 'https://helpx.adobe.com/jp/acrobat/kb/cq07071635/_jcr_content/main-pars/download-section/download-1/file.res/sample.pdf';
  } else {
    const encodeUrl = encodeURI('https://helpx.adobe.com/jp/acrobat/kb/cq07071635/_jcr_content/main-pars/download-section/download-1/file.res/sample.pdf');
    pdfUrl = 'https://docs.google.com/viewer?url=' + encodeUrl + '&embedded=true';
  }
  return (
    <WebView source={{uri: pdfUrl}}/>
  );
}

こんな感じでPDFを表示されました。

以上です。

お疲れ様でございました！