Penyedia File

Nuxt PDF Kit mendukung pemuatan file PDF dari berbagai sumber melalui sistem penyedianya. Ini memungkinkan kamu untuk mengintegrasikan PDF dari Google Drive, CDN kustom, atau sumber lainnya dengan mulus tanpa perlu konfigurasi server manual yang ribet.

Penyedia yang Tersedia

Penyedia URL (Default)

Penyedia default untuk memuat PDF dari URL langsung.

<template>
  <NuxtPdfKit src="/sample.pdf" />
</template>

Contoh Kasus:

• File PDF lokal di direktori /public kamu
• URL langsung dari server kamu sendiri
• URL PDF publik apa pun yang memiliki header CORS yang sesuai

Penyedia Google Drive

Memuat PDF langsung dari Google Drive tanpa perlu rute server manual.

<template>
  <NuxtPdfKit provider="gdrive" src="1bAsv95pTaBiHyGiWFIa-zebT31Al_0tu" />
</template>

Cara mendapatkan ID File Google Drive:

1. Buka file kamu di Google Drive
2. Klik "Share" (Bagikan) → "Get link" (Salin tautan)
3. Salin ID dari URL tersebut: https://drive.google.com/file/d/ID_FILE_DISINI/view
4. Gunakan ID tersebut sebagai prop src

Fitur:

• ✅ Penanganan CORS otomatis
• ✅ Caching bawaan (24 jam)
• ✅ Deteksi peringatan pemindaian virus
• ✅ Tidak perlu rute server manual

Catatan Penting:

Penyedia Kustom

Gunakan CDN atau server proxy kamu sendiri dengan transformasi URL kustom.

<template>
  <NuxtPdfKit
    provider="custom"
    src="file-123"
    :provider-config="{
      baseUrl: '/cdn',
      transform: (id) => `/cdn/${id}.pdf`,
    }"
  />
</template>

Opsi Konfigurasi:

• baseUrl: URL dasar untuk penyedia kustom kamu
• transform: Fungsi kustom untuk mengubah src menjadi URL lengkap
• cache: Mengaktifkan/menonaktifkan caching (default: true)
• maxAge: Durasi cache dalam detik (default: 86400)

Contoh dengan transformasi kustom:

<script setup>
const providerConfig = {
  transform: (id) => {
    // Logika kustom untuk membangun URL
    return `https://my-cdn.com/pdfs/${id}.pdf?token=xyz`;
  },
};
</script>

<template>
  <NuxtPdfKit
    provider="custom"
    src="document-123"
    :provider-config="providerConfig"
  />
</template>

Contoh Lengkap

Berikut adalah contoh lengkap yang menunjukkan cara beralih antar penyedia:

<template>
  <div>
    <!-- Pemilih Penyedia -->
    <select v-model="selectedProvider">
      <option value="url">URL Langsung</option>
      <option value="gdrive">Google Drive</option>
      <option value="custom">CDN Kustom</option>
    </select>

    <!-- Penampil PDF -->
    <NuxtPdfKit
      :provider="selectedProvider"
      :src="pdfSource"
      :provider-config="providerConfig"
      title="Dokumen Saya"
    />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const selectedProvider = ref("url");

const pdfSource = computed(() => {
  switch (selectedProvider.value) {
    case "gdrive":
      return "1bAsv95pTaBiHyGiWFIa-zebT31Al_0tu";
    case "custom":
      return "file-123";
    default:
      return "/sample.pdf";
  }
});

const providerConfig = computed(() => {
  if (selectedProvider.value === "custom") {
    return {
      baseUrl: "/cdn",
      transform: (id) => `/cdn/${id}.pdf`,
    };
  }
  return undefined;
});
</script>

Dukungan TypeScript

Semua tipe penyedia sudah didukung sepenuhnya (fully typed):

import type { PdfProvider, ProviderConfig } from "nuxt-pdf-kit";

const provider: PdfProvider = "gdrive";
const config: ProviderConfig = {
  baseUrl: "/cdn",
  cache: true,
  maxAge: 86400,
};

Pemecahan Masalah

Google Drive: Error "Invalid PDF structure"

Penyebab: File mungkin terlalu besar dan memicu peringatan pemindaian virus dari Google.

Solusi:

1. Gunakan file yang lebih kecil (< 100MB)
2. Unduh file dan host secara langsung
3. Gunakan penyedia yang berbeda

Google Drive: Error "File ID is missing"

Penyebab: ID file tidak diekstrak dengan benar.

Solusi:

1. Verifikasi bahwa ID file sudah benar
2. Pastikan kamu hanya menggunakan ID-nya saja, bukan URL lengkap
3. Periksa apakah file memiliki akses publik

Penyedia Kustom: Error CORS

Penyebab: Server kustom kamu tidak memiliki header CORS yang sesuai.

Solusi:

1. Tambahkan header CORS ke server kamu:

   // server/routes/cdn/[id].ts
   setResponseHeader(event, "Access-Control-Allow-Origin", "*");
   

2. Gunakan rute proxy untuk menangani CORS

Berkontribusi Penyedia Baru

Ingin menambahkan dukungan untuk OneDrive, Dropbox, atau layanan lainnya? Lihat Panduan Kontribusi kami di bawah ini!