Langsung ke konten utama
@capgo/capacitor-pdf-viewer File & Penyimpanan Open source

PDF Viewer plugin Capacitor

Sematkan tampilan PDF native di iOS, Android, dan web dengan path, URL, base64, mode inline, dan dukungan password

Instal

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

Panduan

Cara menggunakan PDF Viewer di Capacitor

Menggunakan @capgo/capacitor-pdf-viewer

Tampilan PDF native di iOS (PDFKit), Android (Pdfium), dan web dengan path, URL, base64, serta mode inline.

Instal

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

Apa yang Diekspos Plugin Ini

  • open - Buka PDF dari file, path, URL, atau sumber base64.
  • close - Tutup viewer yang aktif dan hapus semua overlay.
  • goToPage - Lompat ke nomor halaman (berbasis 1).
  • setZoom - Atur pengali skala zoom.
  • getPluginVersion - Dapatkan penanda versi implementasi native atau web.
  • addListener - Dengarkan event load, pageChange, error, close, dan linkTap.

Contoh Penggunaan

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();

Referensi Lengkap

FAQ

FAQ plugin PDF Viewer

Bagaimana cara install plugin PDF Viewer di aplikasi Capacitor?

Jalankan "bun add @capgo/capacitor-pdf-viewer" (atau "npm install @capgo/capacitor-pdf-viewer"), lalu jalankan "bunx cap sync" agar proyek iOS dan Android mendeteksi code native. Import dari "@capgo/capacitor-pdf-viewer" di dalam code aplikasi Anda.

Apakah @capgo/capacitor-pdf-viewer mendukung React, Vue, dan Angular?

Ya. PDF Viewer adalah paket Capacitor, jadi bisa dipakai dengan framework web apa pun yang berjalan di dalam Capacitor, termasuk Ionic, React, Vue, Angular, Svelte, dan JavaScript biasa.

Versi Capacitor mana yang didukung @capgo/capacitor-pdf-viewer?

Plugin Capgo mengikuti versi mayor Capacitor: gunakan versi mayor plugin yang sesuai dengan versi mayor Capacitor Anda (contoh: plugin v8 dengan Capacitor 8). Tabel kompatibilitas di README GitHub mencantumkan versi yang masih di-maintain.

Apakah @capgo/capacitor-pdf-viewer gratis dan open source?

Ya. Kode sumber code tersedia publik di GitHub: https://github.com/Cap-go/capacitor-pdf-viewer/ dan paketnya gratis diinstal dari npm. Laporan bug dan pull request sangat kami terima.

Bisakah saya update code yang memakai PDF Viewer tanpa review App Store?

Instalasi atau upgrade plugin akan mengubah native code, jadi butuh build store baru. Setelah itu, perubahan JavaScript, HTML, dan CSS yang memanggil plugin bisa langsung dikirim lewat live updates Capgo.

Rilis perubahan PDF Viewer tanpa menunggu review aplikasi

Setelah plugin ada di build store Anda, live updates Capgo akan mengirim perubahan JavaScript, HTML, dan CSS ke pengguna dalam hitungan menit.

Mulai dengan Capgo