javascript - ejemplos - inappbrowser target
Phonegap InAppBrowser display pdf 2.7.0 (8)
Android no tiene capacidad nativa de visor PDF en su navegador (a diferencia de iOS ''Safari). Por lo que puedo ver, hay dos buenas opciones:
Omita la descarga por completo y muestre el pdf a través de las capacidades de visualización en línea de Google Doc Viewer, como se indica en esta respuesta de StackOverflow
DESCARGUE el archivo y use el plugin FileOpener para aplicaciones Android Phonegap como se explica en esta respuesta de StackOverflow . Esto abrirá el archivo en el lector de PDF instalado o le presentará al usuario una opción.
He escrito algunas cosas sobre cómo descargar y mostrar un PDF en iOS y estas opciones que mostré en mi publicación de blog para desarrolladores de Android Phonegap.
Quiero mostrar un PDF externo con el Phonegap InAppBrowser en Android, pero no está funcionando.
Este es mi código 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>
Quiero abrir el pdf después de hacer clic en una imagen, así que uso este código html:
<a href="#" onclick="openPDF()" >
<img src="images/button.png">
</a>
Android webview no tiene un visor de PDF incorporado. Redirigir el usuario al ejemplo de Google doc viewer: http://docs.google.com/viewer?url=http://example.com/example.pdf
Intenté tener el script en el mismo archivo del html y funcionó para mí, el único cambio fue que agregué el atributo "alt" en la imagen:
<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>
Intenta de esta manera, funcionará.
var ref = window.open(''http://docs.google.com/viewer?url=http://www.i-drain.net/userfiles/file/einbauanleitung_iboard.pdf'', ''_system'', ''location=yes'');
Intenta esto para abrir cualquier tipo de documentos desde la URL usando los siguientes pasos:
- instale este plugin: cordova plugin add https://github.com/ti8m/DocumentHandler
usa este código:
handleDocumentWithURL (function () {console.log (''success'');}, function (error) {console.log (''failure''); if (error == 53) {console.log (''No hay aplicación que maneje este archivo escriba. '');}},'' http://www.example.com/path/to/document.pdf '');
Funciona para mí tanto en Android como en IOS. Lo usé para imágenes abiertas y archivos PDF .
Android : Abre archivos usando aplicaciones del sistema, si están disponibles, de lo contrario da un error, que puede manejar.
IOS : abre los archivos en una ventana emergente como vista con el botón Listo y el botón Opción.
No muestra la URL de tus documentos.
La fuente está disponible aquí: https://github.com/ti8m/DocumentHandler
La respuesta de Marc Ster es muy completa. Sin embargo, el enfoque para abrir el pdf con documentos de Google requiere que el usuario inicie sesión con su cuenta de Google.
Si visualiza archivos PDF que se encuentran en un servidor que es suyo , puede evitarlo y usar el siguiente enfoque: Puede configurar la biblioteca PDF.js en su servidor. Es el proyecto de código abierto en el que también se basan los documentos de Google para ver archivos PDF en un navegador web.
Luego puede usar el complemento InAppBrowser para dirigirse a su servidor donde se encuentra el PDF.js, especificando una ruta para que el PDF se muestre en la URL. El pdf también debe estar en su servidor, para evitar problemas CORS. Si se trata de un PDF externo, puede escribir una solución temporal, como se indica here .
Puede mostrar un lado del cliente de PDF con un código similar a este (utilizando el complemento 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'');
Para todos los que están atascados con este problema aquí, es lo que finalmente descubrí:
Etiqueta de objeto HTML 5: no funciona
Etiqueta incrustada: no funciona
Plugin de childBrowser: creo que funcionaría, pero está diseñado para la versión 2.0.0. Así que obtendrás muchos errores, así que no conseguí que funcionara.
Phonegap InAppViewer: si lo usa así:
window.open(''http://www.example.com/test.pdf'', ''_blank'', ''location=yes'')
no funcionará InAppViewer no puede abrir PDF, no importa si el PDF está almacenado de forma externa o local.
Mis soluciones hasta ahora (no fue la idea real):
puede llamar a la función de ventana con _system. como eso:
window.open(''http://www.example.com/test.pdf'', ''_system'', ''location=yes'')
esto abrirá el PDF en el navegador normal y lo descargará. Después de descargarlo, se le preguntará si debería abrirlo con un visor de PDF. Pero debes volver a tu aplicación y abrirla nuevamente después de eso.
Otra posibilidad sería que simplemente la descargues en tu tarjeta SD con la API del sistema de archivos Phonegap así:
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);
});
Lo último que he descubierto es usar Google docs / drive para abrirlo con InAppViewer vinculado a documentos de Google como este:
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'');
}
Esto abrirá el PDF en la aplicación y lo verá en google docs. Puede generar su enlace permanente aquí: https://docs.google.com/viewer Así que incluso si cambia su archivo pdf, todavía funcionará
Espero que este resumen lo ayude a ahorrar tiempo. Si hay otra solución, hágamelo saber
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); });
}