Browser API

<PDFViewer> component

Iframe PDF viewer for client-side generated documents.

• Props

interface PDFViewerProps {
  /**
   * Toggle the visibility of the toolbar
   * @default true
   */
  showToolbar?: boolean
  /**
   * Enable the provide bridge to provide
   * App provides to the Document context
   * @default true
   */
  enableProvideBridge?: boolean
}

• Example

<script setup>
import { PDFViewer, Document, ... } from '@ceereals/vue-pdf'
</script>
<template>
  <PDFViewer :showToolbar="false" :enableProvideBridge="false">
    <Document> ... </Document>
  </PDFViewer>
</template>

<PDFDownloadLink> component

Download link for client-side generated documents.

• Props

interface PDFDownloadLinkProps {
  /**
   * The file name of the pdf file
   * @default 'document.pdf'
   */
  fileName: string
  /**
   * The label of the download link
   * @default 'Download'
   */
  label?: string
}

• Slots

interface PDFDownloadLinkSlots {
  /**
   * @returns VNode[] Must return an array with a single `<Document>` component's VNode, if more than one is provided, only the first one will be used
   */
  default: () => VNode[]
  label?: (params: { blob: Blob | null }) => VNode[] | string
}

• Events

interface PDFDownloadLinkEvents {
  click: [event: MouseEvent]
}

• Example

<script setup>
import { PDFDownloadLink, Document, ... } from '@ceereals/vue-pdf'
</script>
<template>
  <PDFDownloadLink document="Hello world" fileName="somename.pdf">
    <template #label> Download Now! </template>
    <Document> ... </Document>
  </PDFDownloadLink>
</template>

usePdf composable

Vue composable for generating PDF documents.

• Type

interface UsePdfConfig {
  /**
   * If true, the pdf will be rendered immediately and updated
   * @default true
   */
  reactive?: boolean
  /**
   * if true, the Pdf components can inject the application provided values
   */
  enableProvideBridge?: boolean

  /**
   *
   * Will run immediately after the pdf is rendered
   */
  onError?: (error: Error) => Promise<Error | undefined> | Error | undefined
}

interface UsePdfReturn {
  isLoading: Readonly<Ref<boolean>>
  isFinished: Readonly<Ref<boolean>>
  blob: Readonly<Ref<Blob | null>>
  url: Readonly<Ref<string | undefined>>
  error: Readonly<Ref<Error | null>>
  root: Readonly<Ref<PdfRoot>>
  /**
   * Manually call the render function
   * @param throwOnFailed false
   */
  execute: (throwOnFailed?: boolean) => Promise<void>

  /**
   * Unmount the current pdf
   */
  unmount: () => void
}

export function usePdf(
  doc: MaybeRefOrGetter<Component | VNode>,
): UsePdfReturn & PromiseLike<UsePdfReturn>
export function usePdf(
  doc: MaybeRefOrGetter<Component | VNode>,
  options: UsePdfConfig,
): UsePdfReturn & PromiseLike<UsePdfReturn>
export function usePdf(
  doc: MaybeRefOrGetter<Component | VNode>,
  config?: UsePdfConfig,
): UsePdfReturn & PromiseLike<UsePdfReturn> {

• Example

MyComponent.vue

<script setup>
import { usePdf } from '@ceereals/vue-pdf'
import HelloWorldDocument from './HelloWorldDocument.vue'
const { execute } = usePdf(HellowWorldDocument, { reactive: false })
</script>
<template>
  <button @click="() => execute(true)">Generate PDF</button>
</template>

MyAsyncComponent.vue

<script setup>
import { usePdf } from '@ceereals/vue-pdf'
import HelloWorldDocument from './HelloWorldDocument.vue'

const { url } = await usePdf(HelloWorldDocument)
</script>
<template>
  <a :href="url" download="output.pdf">Download PDF</a>
</template>

MyScript.ts

import { h } from '@vue/runtime-core'
import { usePdf } from '@ceereals/vue-pdf'
import HelloWorldDocument from './HelloWorldDocument.vue'

const { url } = await usePdf(
  h(HelloWorldDocument, {
    /** props */
  })
)

NOTE

You can also use usePdf in Node.js and use the Vue reactivity system without needing to create a Vue App.