Saltar al contenido

Document Viewer en Ionic de 0 a PROFESIONAL

Document VIewer Ionic

¿Pensando en implementar la api Document Viewer Ionic en tu aplicación para permitir a tus usuarios leer archivos cómo, por ejemplo, PDFs? 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 para hacerla funcionar ¿verdad?

Si ha respondido sí a cualquiera de estas cuestiones, o cuestiones que puedan estar derivadas, déjame decirte que no eres el único, ni serás el último, que pasa por aquí a dar solución a sus dudas. Es más, hasta los que somos más expertos también necesitamos acudir a estos artículos cuando vamos a implementar librerías que no hemos usado, o hace tiempo que no usamos.

Mi nombre es Aitor Sánchez y soy desarrollador de apps desde el año 2014 y en este artículo te enseñaré, de manera sencilla y totalmente accionable, cómo realizar la implementación de esta librería dentro de tu aplicación.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

 

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/[email protected]

 

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.

 

Más tutoriales de Ionic

 

Y cómo siempre, el tuto en vídeo para los más ganduletes

 

Bueno lector, pues eso ha sido todo por hoy. Solo espero haber podido ayudarte y en caso de que sea así, te suscribas a “El Círculo” Es una comunidad online que estoy montando alrededor de esta disciplina que es el desarrollo de software. Aquí tienes todos los detalles.

Nos vemos en el siguiente artículo. Hasta entonces, que vaya bien.