Saltar al contenido principal
@capgo/capacitor-pdf-viewer Archivos y almacenamiento Código abierto

Visor de PDF plugin Capacitor

Integra la visualización nativa de PDF en iOS, Android y web con rutas, URLs, base64, modo inline y soporte de contraseñas

Instalar

bun add @capgo/capacitor-pdf-viewer bunx cap sync
npm, pnpm o yarn
  • npm install @capgo/capacitor-pdf-viewer
  • pnpm add @capgo/capacitor-pdf-viewer
  • yarn add @capgo/capacitor-pdf-viewer

Guía

Cómo usar PDF Viewer en Capacitor

Uso de @capgo/capacitor-pdf-viewer

Visualización nativa de PDF en iOS (PDFKit), Android (Pdfium) y web con rutas, URLs, base64 y modo inline.

Instalar

bun add @capgo/capacitor-pdf-viewer
bunx cap sync

Lo que expone este plugin

  • open - Abre un PDF desde un archivo, ruta, URL u origen base64.
  • close - Cierra el visor activo y elimina cualquier overlay.
  • goToPage - Salta a un número de página (empezando en 1).
  • setZoom - Establece el multiplicador de escala de zoom.
  • getPluginVersion - Obtiene el marcador de versión de la implementación nativa o web.
  • addListener - Escucha eventos de load, pageChange, error, close y linkTap.

Ejemplo de uso

open

import { PdfViewer } from '@capgo/capacitor-pdf-viewer';

await PdfViewer.addListener('pageChange', ({ page, pageCount }) => {
  console.log(`Page ${page} of ${pageCount}`);
});

const { pageCount } = await PdfViewer.open({
  source: 'https://example.com/manual.pdf',
  mode: 'fullscreen',
  scrollMode: 'continuous',
  page: 1,
});

console.log(`Opened ${pageCount} pages`);

close

import { PdfViewer } from '@capgo/capacitor-pdf-viewer';

await PdfViewer.close();

Referencia completa

FAQ

Preguntas frecuentes del plugin PDF Viewer

¿Cómo instalo el plugin PDF Viewer en una app de Capacitor?

Ejecuta "bun add @capgo/capacitor-pdf-viewer" (o "npm install @capgo/capacitor-pdf-viewer") y luego ejecuta "bunx cap sync" para que los proyectos de iOS y Android incorporen el code nativo. Impórtalo desde "@capgo/capacitor-pdf-viewer" en el code de tu app.

¿Funciona @capgo/capacitor-pdf-viewer con React, Vue y Angular?

Sí. PDF Viewer es un paquete de Capacitor, por lo que funciona con cualquier framework web que se ejecute dentro de Capacitor, incluyendo Ionic, React, Vue, Angular, Svelte y JavaScript puro.

¿Qué versión de Capacitor soporta @capgo/capacitor-pdf-viewer?

Los plugins de Capgo siguen la versión mayor de Capacitor: usa la versión mayor del plugin que coincida con la versión mayor de tu Capacitor (por ejemplo, el plugin v8 con Capacitor 8). La tabla de compatibilidad del README de GitHub lista las versiones mantenidas.

¿Es @capgo/capacitor-pdf-viewer gratuito y de código abierto?

Sí. El código fuente de code es público en GitHub, en https://github.com/Cap-go/capacitor-pdf-viewer/, y el paquete se puede instalar gratis desde npm. Se aceptan informes de errores y pull requests.

¿Puedo actualizar code que usa PDF Viewer sin pasar por una revisión de la App Store?

Instalar o actualizar el plugin cambia el code nativo, así que requiere un nuevo build para la tienda. Después, los cambios de JavaScript, HTML y CSS que llamen al plugin se pueden publicar al instante con las live updates de Capgo.

Publica cambios de PDF Viewer sin esperar la revisión de la app

Una vez que el plugin esté en tu store build, Capgo live updates envía tus cambios de JavaScript, HTML y CSS a los usuarios en minutos.

Empieza con Capgo