Aprende a crear y guardar un archivo PDF usando Ionic y Capacitor
En este artículo, explicaremos cómo crear y guardar un archivo PDF utilizando Ionic y Capacitor, abarcando dos escenarios: crear el archivo PDF a partir de una cadena en formato Base64 y crear el archivo PDF a partir de una cadena de texto.
Introducción
La creación y almacenamiento de archivos PDF en dispositivos móviles es una funcionalidad frecuente en muchas aplicaciones. Ionic junto a Capacitor ofrecen herramientas poderosas para realizar estas tareas de manera eficiente. A lo largo de este tutorial, exploréremos los pasos necesarios para almacenar archivos PDF creados a partir de una cadena en formato Base64 y desde una cadena de texto simple.
Requisitos
- Conocimientos básicos de Ionic y Capacitor.
- Un proyecto Ionic configurado.
Instalación del Plugin Filesystem
Primero, debemos instalar el plugin Filesystem de Capacitor:
npm install @capacitor/filesystem
npx cap synciOS
Para que los archivos aparezcan en la aplicación Archivos, es necesario establecer las siguientes claves en YES en Info.plist:
UIFileSharingEnabled(Application supports iTunes file sharing)LSSupportsOpeningDocumentsInPlace(Supports opening documents in place)
<key>UIFileSharingEnabled</key>
<true/>
<key>LSSupportsOpeningDocumentsInPlace</key>
<true/>Android
Si configuramos Directory.Documents o Directory.ExternalStorage, en Android 10 y versiones anteriores, esta API requiere que se añadan los siguientes permisos a su AndroidManifest.xml:
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />Escenario 1: Crear un PDF a partir de una cadena en Base64
En este primer escenario, crearemos un archivo PDF utilizando una cadena ya codificada en Base64. Para lograrlo haremos uso del método writeFile el cual recibe por parámetros la siguiente configuración.
path: hace referencia al nombre que tendrá el archivo ejemplo “filename.pdf”. Si es requerido que el archivo se guarde en algún árbol de carpetas puedes establecerlo de la siguiente forma: “base64/filename.pdf”.
data: hace referencia al contenido que se escribirá, en nuestro caso haremos referencia nuestra cadena en base64.
directory: Es la ruta raíz donde se almacenará el pdf, para nuestro ejemplo la estableceremos en documentos.
recursive: Hace referencia a si es requerido crear los directorios padre que falten, en nuestro caso al establecer en path “base64/filename.pdf” debemos establecer recursive en true para que cree el directorio /base64 de forma correcta
Para nuestro ejemplo trabajaremos con valores ya predefinidos pero normalmente tanto el fileName cómo contentBase64 deberían estar definidos como parámetros de entrada del método savePDF()
import { Directory, Filesystem } from '@capacitor/filesystem';
public async savePDF(): Promise<void> {
const fileName = 'base64/PDF-base64.pdf';
const contentBase64= 'JVBERi0xLjQKJaqrrK0KMSAwIG9iago8PAovVGl0bGUgKF...';
const fileOptions: WriteFileOptions = {
path: fileName,
data: contentBase64,
directory: Directory.Documents,
recursive: true
};
await Filesystem.writeFile(fileOptions);
}Resultado Android — iOS
Escenario 2: Crear un PDF a partir de una cadena string
El plugin Filesystem de Capacitor permite escribir datos en archivos, pero no tiene funcionalidades específicas para generar archivos PDF directamente a partir de una cadena de texto sin conversión previa a un formato compatible (como Base64). Para crear un PDF desde una cadena de texto, se necesita una biblioteca adicional para generar el contenido PDF antes de escribirlo en el sistema de archivos. Una opción popular es utilizar bibliotecas como pdf-lib o jspdf para crear el PDF, y luego usar writeFile de Capacitor para guardarlo en el dispositivo.
Para nuestro ejemplo usaremos la biblioteca de jspdf
Paso 1: Instalar jspdf
npm install jspdfPaso 2: Crear el PDF
Procedemos a crear el PDF usando la librería jspdf, una vez creado este, simplemente haríamos uso de nuestro método savePDF() que vimos en el escenario 1
import { jsPDF } from 'jspdf';
async createPdfFromText() {
const fileName: "text/plane.text.pdf"
const text = "Este es un documento PDF creado desde una cadena de texto.";
const pdf = new jsPDF();
pdf.text(text, 10, 10);
const pdfOutput = pdf.output('datauristring');
await this.savePDF(fileName, pdfOutput)
}Resultado Android — iOS
Abrir PDF
Como apartado final una vez descargado nuestro PDF es muy probable que se requiera dar al usuario la opción de poder ver el archivo que se acaba de descargar, para lograr este comportamiento estaremos haciendo uso del plugin file-opener de Capacitor.
paso 1: instalar el plugin
npm install @capacitor-community/file-opener
npx cap syncpaso 2: implementar el metodo open()
Para lograr abrir el archivo haremos uso del método open el cual recibe por parámetros la siguiente configuración.
filePath: hace referencia a ruta donde esta ubicado el archivo
contentType: hace referencia al tipo de archivo que se va a abrir y su valor se toma de los tipos MIME, para nuestro caso será ‘application/pdf’
openWithDefault: se establece para abrir el archivo con la aplicación compatible establecida por defecto.
MIME types: https://developer.mozilla.org/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
import { FileOpener, FileOpenerOptions } from '@capacitor-community/file-opener';
async openFile(url: string): Promise<void> {
const fileOpenerOptions: FileOpenerOptions = {
filePath: url,
contentType: 'application/pdf',
openWithDefault: true
};
await FileOpener.open(fileOpenerOptions);
}Resultado Android
Resultado iOS
Conclusión
Hemos cubierto cómo crear y guardar y abrir archivos PDF en dispositivos móviles utilizando Ionic y Capacitor en dos escenarios diferentes. Esta funcionalidad es esencial para aplicaciones que necesiten manejar documentos PDF de manera eficiente. Revisa la documentación oficial de Capacitor para más detalles y opciones avanzadas.
Si encontraste útil este artículo, compártelo y deja tus comentarios. Happy coding! 🙌🏻
