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

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

ただいまの
回答率

90.36%

  • Monaca

    1040questions

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

  • PDF

    280questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 80

前提・実現したいこと

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

該当のソースコード

  <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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

これ、なかなか難しい問題ですね。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 16: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");
    }
    ```
    とすることも出来ますね。

    キャンセル

  • 2019/02/08 13:51

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

    キャンセル

  • 2019/02/08 14:34

    少しでもお役に立てればよかったです。

    Androidでは、WebView上でPDFを開くのを意図的にさせない実装になっているみたいなんです。
    https://qiita.com/s_of_p/items/1c1a467d246ab7dc45e1

    キャンセル

  • 2019/02/08 14:47

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

    キャンセル

  • 2019/02/08 18:59

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

    キャンセル

同じタグがついた質問を見る

  • Monaca

    1040questions

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

  • PDF

    280questions

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