web-dev-qa-db-ja.com

Phonegap InAppBrowser display pdf 2.7.0

AndroidのphoneGap InAppBrowserで外部PDFを表示したいのですが、機能しません。

これは私のJSコードです：

<script>
function openPDF() {
     var ref = window.open('http://www.i-drain.net/userfiles/file/einbauanleitung_iboard.pdf', '_blank', 'location=yes');
     ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
     ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
     ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
     ref.addEventListener('exit', function(event) { alert(event.type); });
}


</script>

画像をクリックした後にPDFを開きたいので、このHTMLコードを使用します：

 <a href="#" onclick="openPDF()" >
   <img src="images/button.png">
 </a>
javascripthtml5cordovainappbrowser
26
Marc Ster

この問題に悩まされているすべての人にとって、ここに私が最終的に見つけたものがあります：

HTML 5オブジェクトタグ：が機能していません

埋め込みタグ：動作していません

childBrowser Plugin：動作すると思いますが、2.0.0バージョン用に設計されています。そのため、多くのエラーが発生するため、動作しませんでした。

Phonegap InAppViewer：そのように使用する場合：

window.open('http://www.example.com/test.pdf', '_blank', 'location=yes')

うまくいきません。 InAppViewerはPDFを開くことができません。PDFが外部またはローカルに保存されているかどうかは関係ありません。

これまでの私のソリューション（実際のアイデアではありませんでした）：

_systemを使用してウィンドウ関数を呼び出すことができます。そのような：

window.open('http://www.example.com/test.pdf', '_system', 'location=yes')

これにより、通常のブラウザでPDFが開き、ダウンロードされます。ダウンロード後、PDFビューアで開く必要があるかどうかが尋ねられます。アプリに戻り、その後再度開きます。

別の可能性としては、次のようなPhonegap Filesystem APIを使用してSDカードにダウンロードするだけです。

var fileTransfer = new FileTransfer();
fileTransfer.download(
"http://developer.Android.com/assets/images/home/ics-Android.png",
"file://sdcard/ics-Android.png",
function(entry) {
    alert("download complete: " + entry.fullPath);
},
function(error) {
    alert("download error source " + error.source);
    alert("download error target " + error.target);
    alert("upload error code" + error.code);
});

最後に見つけたのは、Google docs/driveを使用して、そのようなgoogle docsにリンクされたInAppViewerでそれを開くことです。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {

window.open('https://docs.google.com/viewer?url=http://www.example.com/test.pdf&embedded=true', '_blank', 'location=yes'); 
ref = window.open('index.html', '_self');
 }

これにより、Googleドキュメントで表示するアプリでPDFが開きます。ここでパーマリンクを生成できます。 https://docs.google.com/viewer PDFファイルを変更しても、引き続き機能します

この要約が時間の節約に役立つことを願っています。別の解決策があれば教えてください

62
Marc Ster

Androidのブラウザーには、ネイティブのPDfビューアー機能がありません（iOSのSafariとは異なります）。私が見る限り、2つの素敵なオプションがあります：

  1. このStackOverflowの回答

  2. ファイルをダウンロードして、Android Phonegapアプリで このStackOverflowの回答 で説明されているFileOpenerプラグインを使用してください。これにより、インストールされたPDFリーダーまたはユーザーに選択肢を提示します。

私はiOSでPDFをダウンロードして表示する方法と 私のブログ記事 for Android Phonegap開発者。

13
EeKay

この方法で試してみてください。

var ref = window.open('http://docs.google.com/viewer?url=http://www.i-drain.net/userfiles/file/einbauanleitung_iboard.pdf', '_system', 'location=yes');
8
Elius

Marc Sterの答えは非常に包括的なものです。ただし、GoogleドキュメントでPDFを開く方法では、ユーザーがGoogleアカウントでログインする必要があります。

自分のサーバーにあるPDFを表示している場合、これを回避し、次のアプローチを使用できます： PDF.js サーバー上のライブラリ。これは、WebブラウザーでPDFを表示するためにgoogle docsもベースにしているオープンソースプロジェクトです。

次に、 InAppBrowser Plugin を使用して、PDF.jsがあるサーバーに移動し、URLに表示するpdfのパスを指定します。 CORSの問題を回避するために、pdfもサーバー上にある必要があります。外部PDFの場合、 here に記載されているように、回避策を書くことができます。

これに似たコードでpdfクライアント側を表示するかもしれません（InAppBrowserプラグインを使用して）

var fileName = "myPdfOnMyServer.pdf";
var url = encodeURIComponent('files/uploads/' + fileName);
var ref = window.open(
         'https://www.<my website>.com/pdfjs-1.0.10XX-dist/web/viewer.html?file='
         + url,
         '_blank',
         'location=no,closebuttoncaption=Close,enableViewportScale=yes');
5
Clawish

Android WebViewにはPDFビューアーが組み込まれています。ユーザーをGoogleドキュメントビューアーにリダイレクトします。例： http://docs.google.com/viewer?url=http:// example.com/example.pdf

2
lsolano

これを試して、次の手順を使用してURLから任意の種類のドキュメントを開きます。

  • このプラグインをインストールします：cordova plugin add https://github.com/ti8m/DocumentHandler

  • このコードを使用してください：

    handleDocumentWithURL（function（）{console.log（ 'success'）;}、function（error）{console.log（ 'failure'）; if（error == 53）{console.log（ 'このファイルを処理するアプリはありませんtype。 '）;}}、' http://www.example.com/path/to/document.pdf '）;

私にとっては、AndroidおよびIOSで動作します。openimagesおよび[〜＃〜] pdf [〜＃〜]ファイル。

Android：利用可能な場合はシステムアプリを使用してファイルを開きます。それ以外の場合は、エラーが発生します。

[〜＃〜] ios [〜＃〜]：[完了]ボタンと[オプション]ボタンのあるビューのようなポップアップでファイルを開きます。

ドキュメントのURLは表示されません。

ソースはここから入手できます： https://github.com/ti8m/DocumentHandler

1
SANAT

私はそれをhtmlの同じファイルにスクリプトを持って試してみましたが、それは私のために働きました、唯一の変更は画像に「alt」属性を追加したことです：

 <html lang="en">

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <a href="#" onclick="openPDF()" >
   <img alt="aaa" src="images/button.png">
 </a>
    </body>
</html>
<script>
function openPDF() {
     var ref = window.open('http://www.i-drain.net/userfiles/file/einbauanleitung_iboard.pdf', '_blank', 'location=yes');
     ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
     ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
     ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
     ref.addEventListener('exit', function(event) { alert(event.type); });
}


</script>
0
SamDroid
function openPDF() {
     var ref = window.open('http://docs.google.com/viewer?url=http://www.i-drain.net/userfiles/file/einbauanleitung_iboard.pdf', '_system', 'location=yes');
     ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
     ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
     ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
     ref.addEventListener('exit', function(event) { alert(event.type); });
}
0
Richa