質問: ### 前提・実現したいこと MONACAでPDFをダウンロード後表示したい。(ダウンロードしてもしなくても、PDFが開ければ良い) ### 発生している問題・エラーメッセージ ``` エラーメッセージ 「chrome://inspect/#devices より」 Resource interpreted as Document but transferred with MIME type application/pdf: "https://helpx.adobe.com/jp/acrobat/kb/cq07071635/_jcr_content/main-pars/download-section/download-1/file.res/sample.pdf". ``` ### 該当のソースコード ``` pdf_test ``` ### 試したこと iOS実機(iPhone7)は問題なくPDFが開く Android実機(Nexus6)はダウンロードしているがPDFがひらかない。 別途monacaではなく、chromeからPDFリンクを開けば普通にPDFは表示される事を確認。 ### 補足情報(FW/ツールのバージョンなど) MONACA環境を最小限で作ろうと思い、Onsen UI V2 JS Minimumというテンプレートからプロジェクトを作成 Cordovaバージョン CLIバージョン7.1.0 iOSプラットフォーム:4.5.4 Androidプラットフォーム:6.4.0
回答: これ、なかなか難しい問題ですね。Nexus 6のAndroidのバージョンはいくつでしょうか? 発生しているエラー ``` Resource interpreted as Document but transferred with MIME type application/pdf: "https://helpx.adobe.com/jp/acrobat/kb/cq07071635/_jcr_content/main-pars/download-section/download-1/file.res/sample.pdf". ``` については、多分、ワーニングなだけで、無視して問題ないと思います。 そのエラーとは別に、AndroidのWebViewではPDFは表示できないため、表示されないのだと思います。 そこで、Monacaで対応するとなると、InAppBrowserでシステムブラウザを使って開くという対応をするか、あるいは、何かしら専用のプラグインを実装するしかないと思います。 InAppBrowserを使う場合は、設定から、InAppBrowserプラグインを組み込みます。そして、アプリ側は、例えば、HTML側は ``` Open PDF ``` JavaScript側は ``` function openPdf(url) { window.open(url, '_system'); } ``` のようにすれば出来ます。 ただ、自分で上記を試してみたところ、開いた時にダウンロードしようとしてしまいますね、、。(Android 8.0機で確認しています) ダウンロードを許可すれば、その後は見れますが。 [2019/02/08追記] WebIntentプラグインを使えば、もう少し便利かもしれません。 Androidでは、WebView(やブラウザ)を使ってPDFを開くのは非推奨で、PDFはPDF専用のリーダーを使うことが推奨されているため、WebIntentプラグインを使って、PDFReaderを呼び出してそちらで表示させるという方法です。 ``` function openPdf(url) { if (window.cordova && cordova.platformId === 'android') { window.plugins.webintent.startActivity({ action: window.plugins.webintent.ACTION_VIEW, url: url, type: 'application/pdf'}, function() {}, function() {alert('Failed to open URL via Android Intent')} ); } else { // Android以外の場合 window.open(url); } } ```