質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PDF

PDF(Portable Document Format)とはISOによって国際標準として制定されている電子ドキュメント用の拡張子です。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

1472閲覧

MONACAでPDFをダウンロード後表示したい。

NatsukiTanaka

総合スコア21

PDF

PDF(Portable Document Format)とはISOによって国際標準として制定されている電子ドキュメント用の拡張子です。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

1クリップ

投稿2019/02/07 01:37

前提・実現したいこと

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".

該当のソースコード

html

1 <a href="https://helpx.adobe.com/jp/acrobat/kb/cq07071635/_jcr_content/main-pars/download-section/download-1/file.res/sample.pdf">pdf_test</a>

試したこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

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側は

<button onclick="openPdf('https://helpx.adobe.com/jp/acrobat/kb/cq07071635/_jcr_content/main-pars/download-section/download-1/file.res/sample.pdf');">Open PDF</button>

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); } }

投稿2019/02/07 07:39

編集2019/02/08 05:47
KNaito

総合スコア376

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

KNaito

2019/02/07 07:44 編集

Google Documentsを使って良いのであれば、上記のopdnPdf関数を ``` function openPdf(url) { var gurl = "http://docs.google.com/viewer?url=" + encodeURIComponent(url) + "&embedded=true"; window.open(gurl, '_system', "location=yes,hidden=no,enableViewportScale=yes,toolbar=no,hardwareback=yes"); } ``` とすることも出来ますね。
NatsukiTanaka

2019/02/08 04:51

KNaito様 Nexus 6のAndroidのバージョンは7.1.1です。 InAppBrowserのサンプルまでいただきありがとう御座います、動作確認できました。 違和感のない動作にするには、独自プラグインを作成してしか無いのかなという事がわかりました。 回答いただき、大変助かりました、ありがとうございます。
KNaito

2019/02/08 05:47

Monacaに標準で用意されている、WebIntentプラグインを使った解決方法を追記しました。こちらの方が便利だと思います。
NatsukiTanaka

2019/02/08 09:59

WebIntent動作確認してみました、素晴らしいです、作ろうと思ってたIntentどうさそのものです。 プラグインを作る手間が省けました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問