PdfViewerEmbedded

Import

import { PdfViewerEmbedded } from '@pzeta/vue-components'

Esempio Base

Props

Emits

Slots

Esempi

Senza toolbar

Nasconde la toolbar custom (showToolbar: false) lasciando solo i controlli nativi del viewer del browser.

Empty state personalizzato

Lo slot #empty-state permette di personalizzare il messaggio quando nessun src è fornito: utile nei layout split-view dove il documento viene caricato solo dopo una selezione in lista.

Azioni custom in toolbar

Lo slot #toolbar-actions aggiunge pulsanti propri (stampa, chiudi, condividi) accanto ai controlli standard.

<PdfViewerEmbedded :src="pdfUrl" height="100%">
  <template #toolbar-actions>
    <button
      type="button"
      class="inline-flex items-center gap-1 px-2 py-1 text-xs rounded text-slate-600 hover:bg-slate-200"
      @click="onChiudi"
    >
      <i class="pi pi-times text-xs" />
      <span class="hidden sm:inline">Chiudi</span>
    </button>
  </template>
</PdfViewerEmbedded>

Visualizzazione di un Blob

Quando il PDF arriva da un'API (es. download di un allegato) puoi passare direttamente il Blob: il componente crea e revoca automaticamente l'object URL.

<script setup lang="ts">
import { ref } from 'vue'
import { PdfViewerEmbedded } from '@pzeta/vue-components'

const pdfBlob = ref<Blob | null>(null)

async function caricaAllegato(id: number) {
  const res = await fetch(`/api/allegati/${id}`)
  pdfBlob.value = await res.blob()
}
</script>

<template>
  <PdfViewerEmbedded v-if="pdfBlob" :src="pdfBlob" height="600px" />
</template>

TypeScript

import type {
  PdfViewerEmbeddedProps,
  PdfViewerEmbeddedEmits,
} from '@pzeta/vue-components'

// Props
const props: PdfViewerEmbeddedProps = {
  src: 'https://example.com/documento.pdf',
  height: '600px',
  showToolbar: true,
  initialPage: 1,
}

// Handler tipizzati
const onLoad = (payload: { totalPages: number }) => {
  console.log('PDF caricato', payload.totalPages)
}

const onError = () => {
  console.warn('Impossibile caricare il PDF')
}

Note Comportamento

• Il rendering avviene tramite <iframe> nativo: aspetto e controlli interni dipendono dal viewer PDF integrato del browser
• Con src di tipo Blob viene generato un object URL via URL.createObjectURL, revocato automaticamente al cambio di src e all'unmount del componente per evitare memory leak
• La pagina iniziale è impostata aggiungendo #page=N all'URL solo se questo non contiene già un hash; non tutti i viewer onorano l'ancora
• Il watch su src ripristina gli stati loading/error ad ogni cambio sorgente
• Documenti remoti richiedono header Content-Type: application/pdf e una configurazione CORS adeguata per essere visualizzati e scaricati
• totalPages è sempre 0 e page-change non viene emesso: la modalità iframe nativa non espone questi metadati

Quando usarlo

• Anteprima inline di allegati PDF in layout split-view (lista a sinistra, documento a destra)
• Visualizzazione di fatture, DDT, contratti o report generati lato server
• Pannello documento con download e apertura in nuova scheda integrati

Per casi diversi:

• Galleria di immagini → Galleria
• Singola immagine con zoom/preview → Image
• Visualizzazione tabellare di dati → DataTable