header_lecciones_v5

Convertir y descargar un PDF en base64 con ionic 4 y capacitor

por Alfonso Urrego, el 13 de enero de 2020

Convertir y descargar un PDF en base64 con ionic 4 y capacitor

Antes de comenzar, daremos por hecho que usted ya cuenta con una aplicación creada con ionic 4 y capacitor junto con el base64 del PDF a descargar.

El proceso de descarga de un PDF es diferente para iOS y Android por tal motivo dividiremos el contenido para cada plataforma.

También es de aclarar que el manejo de rutas nativas de los dispositivos es diferente en iOS y Android lo cual nos ocasiona dolores de cabeza a la hora de almacenar archivos.

Para Android solo basta con especificar la ruta donde deseamos guardar el documento y para ello nos ayudamos del FilesystemDirectory de capacitor que se encarga de interpretar la ruta nativa del dispositivo. Contamos con las siguientes rutas:

  • FilesystemDirectory.Application
  • FilesystemDirectory.Cache
  • FilesystemDirectory.Data
  • FilesystemDirectory.Documents
  • FilesystemDirectory.External
  • FilesystemDirectory.ExternalStorage

Para iOS es un poco más complicado pero no imposible de realizar en nuestra aplicación ionic. En ocasiones iOS presenta problemas con el manejo de los base64, por tal razón nuestro base64 lo debemos convertir en un string blob para que el File.writeFile pueda interpretarlo y poder almacenarlo correctamente.

Dado que iOS no nos permite almacenar documentos en directorios diferentes al temporal, primero guardaremos nuestro documento en dicho directorio con ayuda del File.writeFile de ionic y luego obtendremos nuestra ruta nativa para poder compartir nuestro PDF. Esto lo hacemos haciendo uso del Share de capacitor y él se encargará de almacenar nuestro documento, enviarlo por correo o compartir en redes sociales, etc.

iOS

Para poder guardar el PDF en nuestro dispositivo vamos a hacer uso de los plugins File (ionic - cordova) y Share (capacitor)

Instalamos el plugin de File:

ionic cordova plugin add cordova-plugin-file npm install @ionic-native/file


Importamos los plugins:

import { Component } from '@angular/core'; import { Plugins } from '@capacitor/core'; import { File } from '@ionic-native/file/ngx'; export class downloadPDF { constructor( public file: File, ) { } }

 

Antes de descargar nuestro PDF, primero debemos convertir el base64 en un string blog y para esto vamos a usar la siguiente función.

b64toBlob(b64Data, contentType, sliceSize?) { contentType = contentType || ''; sliceSize = sliceSize || 512; const byteCharacters = atob(b64Data); const byteArrays = []; for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { const slice = byteCharacters.slice(offset, offset + sliceSize); const byteNumbers = new Array(slice.length); for (let i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray); }

Descargamos nuestro PDF. Almacenemos nuestro base64 en una variable.

const dataBase64 = '.....nuestro base64.....';

Asignamos el nombre a nuestro PDF

const fileName = 'PDF-base64.pdf';.

Usamos destructuring para hacer uso del Share de capacitor:

const { Share } = Plugins;

Convertimos nuestro base64 en blob:

const DataBlob = this.b64toBlob(dataBase64, 'application/pdf');

Por medio del uso de File writeFile de ionic guardaremos nuestro PDF temporalmente para luego poder usar la url nativa y poder compartirlo usaremos replace para reemplazar nuestro archivo por si ya existe en el dispositivo. 

this.file.writeFile(this.file.tempDirectory, fileName, DataBlob, { replace: true }).then(res => { console.log('responseWriteFile => ', res); Share.share({ title: fileName, url: res.nativeURL, }).then(resShare => { this.apiServices.presentToast(this.message.successDownload, 'success'); }); }, err => { console.log('Error dataDirectory: ', err); });

Android

Para poder guardar el PDF en nuestro dispositivo vamos hacer uso de los plugins Filesystem y FilesystemDirectory (capacitor)

import { Component } from '@angular/core'; import { Plugins, FilesystemDirectory } from '@capacitor/core'; export class downloadPDF { constructor() { } }

Descargamos nuestro PDF. Almacenemos nuestro base64 en una variable.

const dataBase64 = '.....nuestro base64.....';

Asignamos el nombre a nuestro PDF

const fileName = 'PDF-base64.pdf';

Usamos destructuring para hacer uso del Filesystem de capacitor

const { Filesystem } = Plugins;

Por medio del uso de Filesystem de capacitor guardaremos nuestro PDF y usando FilesystemDirectory le decimos el PATH donde almacenar el archivo. 

Filesystem.writeFile({ path: fileName, data: dataBase64, directory: FilesystemDirectory.Documents, // encoding: FilesystemEncoding.UTF8 }).then(writeFileResponse => { console.log('writeFile success => ', writeFileResponse); this.apiServices.presentToast(this.message.successDownload, 'success'); }, error => { console.log('writeFile error => ', error); this.apiServices.presentToast(this.message.errorDownload, 'danger'); });

Una vez realizados los pasos anteriores la aplicación queda lista para la descarga de documentos en formato PDF; para validar dicha descarga se debe ejecutar esta aplicación en un dispositivo físico de tipo iOS o Android. Se debe realizar la acción dentro de la App que descarga dicho archivo y validar en la carpeta correspondiente a cada sistema operativo y configurada anteriormente en los pasos descritos.

Guía para crear una aplicación serverless en 4 pasos

Temas:Desarrollo de Software

Lecciones Pragma

Lecciones en Academia Pragma

Aquí encontrarás tutoriales técnicos para que apliques en temas de desarrollo de software, cloud, calidad en software y aplicaciones móviles. 

También puedes visitar nuestro Blog con contenido actual sobre Transformación Digital, Marketing, Conocimiento de Usuario y más. 

Blog

Suscríbete a la academia

Descarga la Guía para trabajar con ambientes IBM Websphere Portal