PhoneGap InAppBrowser дисплей pdf 2.7.0

Question

PhoneGap InAppBrowser дисплей 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>

26

javascript html5 cordova inappbrowser

Источник

user1870659 28 май '13 в 14:52

8 ответов

Решение

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

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

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

14

Источник

user901865 18 апр '14 в 10:27

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

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

8

Источник

user2754391 06 сен '13 в 12:40

Ответ Марка Стера очень исчерпывающий. Тем не менее, подход к открытию PDF-файла в Google Docs требует от пользователя входа в систему с помощью своей учетной записи 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

Источник

user2423123 30 май '15 в 15:27

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

2

Источник

user2743721 03 сен '13 в 15:58

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

установить этот плагин: плагин cordova добавить https://github.com/ti8m/DocumentHandler
используйте этот код:
handleDocumentWithURL (function () {console.log ('success');}, function (error) {console.log ('fail'); 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

1

Источник

user2024527 18 ноя '15 в 09:13

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

Источник

user2890134 17 окт '13 в 11:01

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

Источник

user2416461 28 май '13 в 15:22

Другие вопросы по тегам javascript html5 cordova inappbrowser

user1870659 30 май '13 в 12:50 2013-05-30 12:50 · Accepted Answer · 2013-05-30 12:50

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

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

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

Плагин childBrowser: я думаю, что он будет работать, но он предназначен для версии 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. Но вы должны вернуться к своему приложению и открыть его снова после этого.

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

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 Docs. Вы можете создать свою постоянную ссылку здесь: https://docs.google.com/viewer Поэтому, даже если вы измените свой PDF-файл, он все равно будет работать

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