Телефонная карта InAppBrowser display pdf 2.7.0

Я хочу отобразить внешний PDF файл с помощью мобильного телефона InAppBrowser в Android, но он не работает.

Это мой код 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>

Ответы

Ответ 1

Для всех, кто застрял в этой проблеме, вот что я наконец узнал:

Тег объекта HTML 5: не работает

Встроенный тег: не работает

плагин childBrowser: Я думаю, что это сработает, но оно предназначено для версии 2.0.0. Таким образом, у вас будет много ошибок, поэтому я не смог заставить его работать.

Телефонная книга 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. Но вы должны вернуться в свое приложение и снова открыть его после этого.

Другая возможность заключается в том, что вы просто загрузите ее на свою SD-карту с помощью API-интерфейсов Phonegap File:

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, чтобы открыть его с помощью InAppViewer, связанного с такими документами Google:

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, он все равно будет работать

Я надеюсь, что это резюме поможет вам сэкономить время. Если есть другое решение, дайте мне знать

Ответ 2

Android не имеет встроенных возможностей просмотра PDf в своем браузере (в отличие от iOS Safari). Насколько я вижу, есть два приятных варианта:

Пропустите загрузку полностью и покажите pdf с помощью возможностей онлайн-просмотра Google Doc Viewer, как указано в fooobar.com/questions/237768/...
Загрузите файл и используйте плагин FileOpener для приложений Android Phonegap, как описано в fooobar.com/questions/237768/.... Это либо откроет файл в установленном PDF-читателе, либо представит пользователю выбор.

Я написал некоторые материалы по загрузке и показу PDF на iOS, и эти параметры я показал в мой пост в блоге для разработчиков Android Phonegap.

Ответ 3

Попробуйте таким образом, что он будет работать.

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

Ответ 4

Ответ Marc Ster очень всеобъемлющий. Тем не менее, для открытия PDF-документа с документами google требуется, чтобы пользователь заходил в свою учетную запись google.

Если вы показываете pdf файлы, расположенные на сервере, который является вашим собственным, вы можете избежать этого и использовать следующий подход: вы можете настроить PDF.js на вашем сервере. Это проект с открытым исходным кодом, который также поддерживает документы google для просмотра PDF файлов в веб-браузере.

Затем вы можете использовать плагин InAppBrowser, чтобы отправиться на ваш сервер, где находится файл PDF.js, указав путь для pdf, который будет отображаться в URL. PDF файл также должен быть на вашем сервере, чтобы избежать проблем с CORS. Если это внешний 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');

Ответ 5

В Android-браузере Android нет встроенного средства просмотра PDF. Перенаправить пользователя в Google doc viewer: http://docs.google.com/viewer?url=http://example.com/example.pdf

Ответ 6

Попробуйте открыть любые документы из URL, используя следующие шаги:

установить этот плагин: плагин cordova добавить https://github.com/ti8m/DocumentHandler
используйте этот код:

handleDocumentWithURL (function() {console.log('success');}, function (error) {console.log('failure'); if (error == 53) {console.log('Нет приложения, которое обрабатывает этот тип файла. ');}},' http://www.example.com/path/to/document.pdf ');

Он работает для меня как на Android, так и на IOS. Я использовал его для открытых изображений и PDF файлов.

Android. Он открывает файлы, используя системные приложения, если они доступны, в противном случае они выдают ошибку, с которой вы можете справиться.

IOS. Он открывает файлы в виде всплывающих окон с кнопкой "Готово" и кнопкой "Option".

Он не показывает URL вашего документа.

Источник доступен здесь: https://github.com/ti8m/DocumentHandler

Ответ 7

Я попробовал использовать script в том же файле 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>

Ответ 8

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