javascript - Phonegap InAppBrowser ディスプレイ pdf 2.7.0

Question

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>

score 63 · Accepted Answer

この問題で立ち往生しているすべての人のために、私が最終的に見つけたのは次のとおりです。

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

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

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

score 5 · Accepted Answer

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

独自のサーバーにある pdf を表示している場合は、これを回避して次のアプローチを使用できます。サーバーにPDF.jsライブラリをセットアップできます。これは、Web ブラウザーで PDF を表示するために Google ドキュメントも基づいているオープンソースプロジェクトです。

次に、InAppBrowser プラグインを使用して、PDF.js があるサーバーにアクセスし、URL に表示する PDF のパスを指定します。CORSの問題を回避するために、pdfもサーバー上にある必要があります。外部の PDF の場合は、ここに記載されているように回避策を作成できます。

これに似たコードで 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');

score 2 · Accepted Answer

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

score 1 · Accepted Answer

次の手順を使用して、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の両方で機能します。開いている画像とPDFファイルに使用しました。

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

IOS : [完了] ボタンと [オプション] ボタンを使用して、ビューのようなポップアップでファイルを開きます。

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

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

score 0 · Accepted Answer

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

javascript - Phonegap InAppBrowser ディスプレイ pdf 2.7.0

8 に答える 8

Related

Reference