Browser API
BlobProvider
Renders no markup of its own — it generates the PDF and hands the resulting blob, URL, and render state to its default scoped slot. Use it when you want the output but not the anchor or the iframe.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
document | DocumentTree | — | A prebuilt document tree ({ type, props, children }), for react-pdf API parity. Optional — prefer the document slot. |
document takes a plain document tree object. To compose your PDF with the usual components, use the document slot instead. Slots
| Prop | Type | Default | Description |
|---|---|---|---|
document | slot | — | Your <Document> component. Rendered into a hidden container; its assembled tree is handed to the internal pdf instance. |
default | scoped slot | — | Receives the render state: { url, blob, error, loading }. |
Usage
vue
<script setup lang="ts">
import { BlobProvider } from '@vuepdf/renderer'
import MyDocument from './MyDocument.vue'
</script>
<template>
<BlobProvider>
<template #document>
<MyDocument />
</template>
<template #default="{ url, loading }">
<button v-if="loading" disabled>Generating...</button>
<a v-else :href="url" download="document.pdf">Download PDF</a>
</template>
</BlobProvider>
</template>Working With the Blob
The raw Blob is available as soon as a render finishes — upload it, hash it, or store it:
vue
<template>
<BlobProvider>
<template #document>
<MyDocument />
</template>
<template #default="{ blob, loading, error }">
<p v-if="error">Could not generate the PDF.</p>
<button v-else :disabled="loading" @click="upload(blob)">
{{ loading ? 'Generating...' : 'Upload to server' }}
</button>
</template>
</BlobProvider>
</template> The blob URL is revoked automatically when it is replaced by a new render and when the component unmounts, so don't hold onto
url past the component's lifetime — keep the blob instead.