Document Viewer en Ionic de 0 a PROFESIONAL

¿Necesitas, por ejemplo, leer un archivo PDF desde tu aplicación? O, quizás ya sabes cómo se hace, pero te falta conocer algún detalle cómo los parámetros de una función o los campos que tiene la clase Document Viewer para hacerla funcionar ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo vas a aprender, de manera sencilla y con ejemplos, a cómo visualizar buena cantidad de archivos en formatos diferentes dentro de tu aplicación

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde aprenderás desarrollo de apps móviles, aso y monetización junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Qué es Document Viewer Ionic

Cómo podrás intuir por el nombre, se trata de una API que nos permitirá embeber dentro de nuestra aplicación un visto de documentos para buena cantidad de formatos actuales. Aunque lo normal será usarlo para leer PDFs.

Instalando el componente

Cómo todos los componentes desacoplados de Ionic, y cómo vemos en todos los artículos de Ionic de esta web, necesitamos instalar el módulo.

Para esto vamos a utilizar las siguientes dos líneas de código:

$ ionic cordova plugin add cordova-plugin-document-viewer
$ npm install --save @ionic-native/document-viewer@4

La primera instalará el plugin que permitirá la comunicación de la parte nativa del sistema con el código TS.

La segunda instalará el código TS necesario para poder comunicar nuestro código TS con el del componente.

Configurando el módulo

En el caso de que estemos usando Ionic 4 o superior, y el módulo NGX, este paso no será necesario.

Para poder utilizar el Document Viewer necesitamos incluirlo en los “providers” del componente donde lo vayamos a usar. Digo componente porque no es necesario que se meta en los “providers” globales. De esta manera ahorramos en rendimiento y buenas prácticas.

import { DocumentViewer } from '@ionic-native/document-viewer';

...

providers: [
...,
DocumentViewer
...
]

...

Qué plataformas soporta Document Viewer Ionic

La verdad que son las de “casi siempre” pero debo ponerlas porque mi trabajo es facilitarte la vida lo máximo posible:

• Android
• iOS
• Windows

Cómo se usa el Document Viewer

Llegamos a lo que nos interesa, y porque seguramente estés aquí. Cómo podemos usar el módulo. Pero antes vamos a ver un ejemplo de código que nos va a permitir entenderlo todo mucho mejor:

import { DocumentViewer } from '@ionic-native/document-viewer';

constructor(private document: DocumentViewer) { }

...
const options: DocumentViewerOptions = {
  title: 'My PDF'
}

this.document.viewDocument('assets/myFile.pdf', 'application/pdf', options)

Un código sencillo y 100% funcional en el caso de que tengamos un PDF situado ahí y con ese nombre.

• La primera línea de código importará el componente a nuestro código para que podamos hacer uso de dicha clase.
• Posteriormente inyectaremos una instancia de dicho componente a través del constructor. Algo muy común en este tipo de Framework.
• Después usaremos la interface DocumenViewerOptions, que ahora veremos sus campos más abajo, para darle forma a nuestro visor. En este caso le hemos asignado el título de la ventana donde se va a ver el documento.
• Y posteriormente, con el método “viewDocument” vamos a hacer que el sistema se ponga a trabajar para mostrarnos dicho documento.

Lo repito una vez más, es un código funcional pero demasiado simple. Habría, por ejemplo, y en caso de que lo quieras usar, darle rutas que estén comprobadas y existan. A parte ahora explicaré una cosa más que será muy útil usarlo en conjunto.

La explicación antes mencionada es: Para poder trabajar con este componente de una manera mucho más completa te aconsejo que revises el componente "File" de Ionic. Así podrás entender los conceptos mucho mejor para entender cómo funciona.

Funciones y campos de clase de Document Viewer Ionic

Ahora vamos a profundizar un poco más en la api Document Viewer Ionic, cómo hacemos siempre en esta parte, en que nos ofrece el DocumentViewer.

Recordemos que solo comentaré funcionalidad propia del componente, si lo que buscas está en alguno de los padres, aquí no aparecerá. Busca la información del módulo padre.

getSupportInfo()

• No recibe parámetros.
• Retorna una promesa que tendremos que controlar.

Estar funcionalidad, cómo su nombre indica, nos permite comprobar el estado del componente para ver si podemos hacer uso de él inmediatamente, todavía se está inicializando o si no vamos a poder usarlo.

cavViewDocument(url, contentType, options, onPosible, onMissingApp, onImposible, onError)

• Parámetros:
  • url: string -> Una cadena que le indicará al sistema donde se encuentra el documento que queremos visualizar.
  • contentType: string -> Al ser un visor web, tendremos que decirle que tipo de “contentType” va a mostrar. Aquí puedes ver cuales tenemos disponibles.
  • options: DocumentViewerOptions -> Será una interfaz de este tipo que ahora veremos más abajo sus campos.
  • onPosible: function (opcional) -> Será el nombre de la función a ejecutar, o una función anónima, que se ejecutará sea posible abrir el documento.
  • onMissingApp: function (opcional) -> Será el nombre de la función a ejecutar, o una función anónima, que se ejecutará en caso de que la app de lector de documentos no esté instalada.
  • onImposible: function (opcional) -> Será el nombre de la función a ejecutar, o una función anónima, que se ejecutará en caso de no sea posible abrir el documento. Bien porque no exista o no sea accesible.
  • onError: function (opcional) -> Será el nombre de la función a ejecutar, o una función anónima, que se ejecutará cuando haya habido algún problema al intentar buscar el documento.
• No retornada nada.

Con esta función podremos controlar el estado del documento que queremos abrir. Así podremos comprobar si es posible, existe, o no se puede abrir dicho documento.

viewDocument(url, contentType, options, onShow, onClose, onMissingApp, onError)

• Parámetros:
  • url: string -> Una cadena que le indicará al sistema donde se encuentra el documento que queremos visualizar.
  • contentType: string -> Al ser un visor web, tendremos que decirle que tipo de “contentType” va a mostrar. Aquí puedes ver cuales tenemos disponibles.
  • options: DocumentViewerOptions -> Será una interfaz de este tipo que ahora veremos más abajo sus campos.
  • onShow: function (opcional) -> Será el nombre de la función a ejecutar, o una función anónima, que se ejecutará cuando el documento sea mostrado.
  • onClose: function (opcional) -> Será el nombre de la función a ejecutar, o una función anónima, que se ejecutará cuando el documento haya sido cerrado.
  • onMissingApp: function (opcional) -> Será el nombre de la función a ejecutar, o una función anónima, que se ejecutará en caso de que la app de lector de documentos no esté instalada.
  • onError: function (opcional) -> Será el nombre de la función a ejecutar, o una función anónima, que se ejecutará cuando haya habido algún problema al intentar mostrar el documento.
• No retornada nada.

Esta es la función que nos permite visualizar el documento.

DocumentViewerOptions

Llegamos a la zona que hemos estado posponiendo todo el artículo. Aquí te mostraré cuales son los campos que tenemos disponibles para usar junto a la apertura del documento. Vamos con ellos. Recuerda, todos los campos son opcionales.

• title: string -> El título que tendrá la ventana cuando se abra.
• documentView: -> otra interfaz con los siguientes campos:
  • closeLabel: string -> Será el campo de texto que aparecerá en la zona de cerra el documento.
• navigationView: -> Otra interfaz con los siguientes campos:
  • closeLabel: string -> Será el campo de texto que aparecerá en la vista donde se está mostrando el documento en la zona de cerrar.
• email: booleano -> Nos permite definir si queremos que aparezca el botón de compartir por mail en el visor.
• print: booleano -> Nos permite definir si queremos que aparezca el botón de imprimir el documento en el visor.
• openWith: booleano -> Nos permite definir si queremos que aparezca la ventana de abrir con una app diferente el archivo que vamos a visualizar.
• bookmarks: booleano -> Nos permite definir si queremos que se puedan añadir marcadores al documento.
• search: booleano -> Nos permite definir si queremos que se puedan realizar búsquedas dentro de dicho documento.
• autoClose: booleano -> Nos permite definir si queremos que se pueda cerrar de manera automática el documento. Por ejemplo, cuando bloqueamos la pantalla del dispositivo. O más concretamente, cuando se llama al disparador “onPause” de nuestra app.

Tutorial en video, si te gusta más ver que leer

Algo más que quizás te interese

Si optimizas y mejoras de manera constante el logo de tu aplicación, vas a recibir más descargas y vas a ganar más dinero. Es una estrategia coherente en la que la inversión en tipo/resultados suele ser positivo. Por esta razón, ya tienes disponible nuestra herramienta de mejora de logos. Con ella evaluas, optimizas y mejoras tu logo y puedes espiar los logos de la competencia. No te espoileo más, mira en este enlace.

Y ahora ya si, nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!