Panduan Memulai

Salin prompt setup yang berisi langkah install dan panduan markdown lengkap untuk plugin ini.

        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.

Instal

Anda bisa menggunakan AI-Assisted Setup kami untuk menginstal plugin ini. Tambahkan skill Capgo ke tool AI Anda dengan command berikut:

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

Lalu gunakan prompt berikut:

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

Jika Anda lebih memilih Manual Setup, instal plugin dengan menjalankan perintah berikut dan ikuti petunjuk khusus platform di bawah ini:

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

Impor

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

Mulai cepat

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

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

Kesalahan umum

Listener: hapus handle saat screen unmount.
Sinkronisasi Native: jalankan bunx cap sync setelah upgrade plugin.
Sumber kebenaran tunggal: percayai src/definitions.ts di repo GitHub.

Setup platform

Setup iOS (PDFKit, tanpa key plist tambahan).
Setup Android (Pdfium, INTERNET untuk sumber HTTPS).
underWebView untuk PDF native di belakang WebView transparan dengan chrome HTML kustom (iOS dan Android).

Penggunaan

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.