Mulai
Instalasi
Mulai menggunakan Nuxt PDF Kit.
Instalasi Cepat
Cara termudah untuk menambahkan Nuxt PDF Kit ke aplikasi Nuxt Anda adalah menggunakan Nuxt CLI:
Terminal
npx nuxt module add nuxt-pdf-kit
Perintah ini secara otomatis menambahkan modul ke
nuxt.config.ts Anda dan menginstal paketnya.Instalasi Manual
Jika Anda lebih suka menginstal secara manual, ikuti langkah-langkah berikut:
Instal paket
Menggunakan manajer paket pilihan Anda:
npm i nuxt-pdf-kit
yarn add nuxt-pdf-kit
pnpm add nuxt-pdf-kit
bun add nuxt-pdf-kit
Tambahkan ke Konfigurasi Nuxt
Tambahkan nuxt-pdf-kit ke array modules di nuxt.config.ts Anda:
nuxt.config.ts
export default defineNuxtConfig({
modules: ["nuxt-pdf-kit"],
});
Mulai menggunakan penampil PDF
Anda siap menggunakan penampil PDF di komponen Anda:
app.vue
<template>
<NuxtPdfKit src="/sample.pdf" />
</template>
Konfigurasi Modul
Anda dapat mengonfigurasi modul secara global di nuxt.config.ts Anda:
nuxt.config.ts
export default defineNuxtConfig({
modules: ["nuxt-pdf-kit"],
pdfKit: {
// Konfigurasi Toolbar
toolbar: {
sidebar: true, // Toggle sidebar thumbnail
pageNavigation: true, // Kontrol navigasi halaman
zoom: true, // Kontrol zoom
search: true, // Alat pencarian
rotate: true, // Tombol putar
openFile: false, // Tombol buka file (dinonaktifkan secara default)
print: true, // Tombol cetak
download: true, // Tombol unduh
fullscreen: true, // Tombol layar penuh
themeToggle: true, // Tombol toggle tema
moreOptions: true, // Menu opsi lainnya
},
},
});
Opsi Toolbar
sidebar
boolean
Tampilkan/sembunyikan tombol toggle sidebar thumbnail.
pageNavigation
boolean
Tampilkan/sembunyikan kontrol navigasi halaman (tombol halaman sebelumnya/berikutnya dan input halaman).
zoom
boolean
Tampilkan/sembunyikan kontrol zoom (perbesar, perkecil, dan pemilih tingkat zoom).
search
boolean
Tampilkan/sembunyikan alat pencarian untuk fungsionalitas pencarian teks lengkap.
rotate
boolean
Tampilkan/sembunyikan tombol putar untuk rotasi dokumen.
openFile
boolean
Tampilkan/sembunyikan tombol buka file (dinonaktifkan secara default untuk keamanan).
print
boolean
Tampilkan/sembunyikan tombol cetak untuk fungsionalitas cetak bawaan.
download
boolean
Tampilkan/sembunyikan tombol unduh untuk menyimpan PDF.
fullscreen
boolean
Tampilkan/sembunyikan tombol toggle layar penuh.
themeToggle
boolean
Tampilkan/sembunyikan tombol toggle tema (mode terang/gelap).
moreOptions
boolean
Tampilkan/sembunyikan menu dropdown opsi lainnya.
Dependensi yang Terinstal Otomatis
Nuxt PDF Kit secara otomatis mengelola dependensinya. Paket-paket berikut akan diinstal secara otomatis jika belum tersedia:
| Paket | Deskripsi |
|---|---|
@nuxt/ui | Nuxt UI untuk komponen antarmuka premium |
@vueuse/nuxt | Composables VueUse untuk fungsionalitas tambahan |
pdfjs-dist | Pustaka PDF.js Mozilla untuk rendering PDF |
Anda tidak perlu menginstal paket-paket ini secara manual. Nuxt PDF Kit menangani instalasi secara otomatis saat Anda menambahkan modul.
Penggunaan Dasar
Setelah terinstal, Anda dapat menggunakan komponen NuxtPdfKit di mana saja dalam aplikasi Anda:
<template>
<div class="h-screen">
<NuxtPdfKit src="/document.pdf" />
</div>
</template>
Memuat dari URL
<template>
<NuxtPdfKit src="https://example.com/document.pdf" />
</template>
Memuat dari folder publik
Letakkan PDF Anda di folder public/ dan referensikan secara langsung:
<template>
<NuxtPdfKit src="/my-document.pdf" />
</template>
Langkah Selanjutnya
Sekarang setelah Nuxt PDF Kit terinstal, Anda dapat:
- Mempelajari tentang Props Komponen untuk menyesuaikan penampil
- Menjelajahi Composables untuk kontrol programatik
- Memeriksa opsi Module Options untuk konfigurasi global