Erste Schritte

Kopiere einen Setup-Prompt mit den Installationsschritten und dem vollständigen Markdown-Guide für dieses Plugin.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-pdf-viewer`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/pdf-viewer/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

Installieren

Du kannst unser KI-gestütztes Setup nutzen, um das Plugin zu installieren. Füge die Capgo Skills mit dem folgenden Befehl deinem KI-Tool hinzu:

bunx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Nutze dann diesen Prompt:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-pdf-viewer` plugin in my project.

Wenn du ein manuelles Setup bevorzugst, installiere das Plugin mit den folgenden Befehlen und befolge die plattformspezifischen Anweisungen unten:

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

Importieren

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

Quickstart

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

const result = await PdfViewer.open({
  source: 'https://example.com/manual.pdf',
  headers: { Authorization: 'Bearer token' },
  mode: 'fullscreen',
});

Häufige Stolperfallen

Listener: Handles beim Unmounten von Screens entfernen.
Nativer Sync: ausführen bunx cap sync nach Plugin-Upgrades.
Single Source of Truth: Vertrauen src/definitions.ts im GitHub Repo.

Plattform-Setup

iOS-Setup (PDFKit, keine zusätzlichen plist-Keys).
Android-Setup (Pdfium, INTERNET für HTTPS-Quellen).
underWebView für ein natives PDF hinter einer transparenten WebView mit eigenem HTML-Chrome (iOS und Android).

Nutzung

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',
  headers: { Authorization: 'Bearer YOUR_TOKEN' },
  mode: 'fullscreen',
  scrollMode: 'continuous',
  page: 1,
});

console.log(`Opened ${pageCount} pages`);
// Call PdfViewer.close() when the user dismisses the viewer or you navigate away.