API

Loader, Progress, Events & Slots

Name: vue-pdf-export
Author: Saurabh Choudhary

Loader & Progress

Built-in loader

<Html2Pdf :show-loader="true" loader-text="Generating PDF..." />

Disable it:

<Html2Pdf :show-loader="false" />

Numeric progress

<Html2Pdf @progress="onProgress" />

function onProgress(value: number) {
  console.log(value)
}

This is generation-stage progress, not byte-level network progress.

Rich progress stages

<Html2Pdf @progress-stage="onProgressStage" />

import type { PdfProgressState } from 'vue-pdf-export'

function onProgressStage(state: PdfProgressState) {
  console.log(state.stage, state.progress)
}

Current stages:


idle

pagination

images

preparing

rendering

watermark

header

footer

metadata

serializing

complete

error

Custom loader

<Html2Pdf>
  <template #loader="{ progress, loading, stage, progressState }">
    <div v-if="loading">
      {{ stage }} - {{ progress }}%
    </div>
  </template>
</Html2Pdf>

Slot values:

Value	Type
`progress`	`number`
`loading`	`boolean`
`stage`	`PdfProgressStage`
`progressState`	`PdfProgressState`

Events

<Html2Pdf
  @progress="onProgress"
  @progress-stage="onProgressStage"
  @startPagination="onStartPagination"
  @hasPaginated="onPaginated"
  @beforeDownload="onBeforeDownload"
  @hasDownloaded="onDownloaded"
  @closed="onClosed"
  @error="onError"
/>

Event	Payload	Description
`progress`	`number`	Numeric generation progress.
`progressStage` / `@progress-stage`	`PdfProgressState`	Named stage and progress.
`startPagination`	none	Pagination started.
`hasPaginated`	none	Pagination completed.
`beforeDownload`	`BeforeDownloadPayload`	Emitted before generation.
`hasDownloaded`	`Blob`	Generated Blob is available.
`closed`	none	Preview/generation flow closed.
`error`	`Error`	Generation or print error.

Slots

Slot	Required	Description
`pdf-content`	yes	HTML converted to PDF.
`loader`	no	Custom loader with `{ progress, loading, stage, progressState }`.

Programmatic API

TypeScript

The package ships TypeScript declarations.