PDF Footers in Vue
The built-in footer appears on every generated page. Footers have no separate pages selector.
<script setup lang="ts">
import { Html2Pdf } from 'vue-pdf-export'
import type { FooterOptions } from 'vue-pdf-export'
import 'vue-pdf-export/style.css'
const footer: FooterOptions = {
enabled: true,
height: 58,
useHtml: true,
html: '<strong>My company</strong>',
template: 'Page {n} of {total}',
}
</script>
<template>
<Html2Pdf :footer="footer" :manual-pagination="true">
<template #pdf-content><article>Document content</article></template>
</Html2Pdf>
</template>
| Field | Default | Meaning |
|---|---|---|
enabled | false | Render the footer. |
height | 58 via component | Reserved height in the active jsPDF unit (px by default). |
useHtml | component compatibility default true | HTML/image or plain-text built-in footer. |
template | Page {n} of {total} | Generated-page number text. |
text / html | empty | Body content; non-empty HTML takes precedence in HTML mode. |
showLogo | true | Show an available logo. |
logoUrl / logoDataUrl | empty | Logo URL or data URL. |
logoWidth / logoHeight | 26 CSS px | Maximum logo box. |
backgroundColor / textColor | #F8F9FA / #5F6368 | Built-in layer colors. |
Only use trusted HTML, or sanitize user-authored content first. A remote logo must be accessible under browser CORS rules.
Vue footer slot
<script setup lang="ts">
import { Html2Pdf } from 'vue-pdf-export'
import 'vue-pdf-export/style.css'
</script>
<template>
<Html2Pdf :footer="{ height: 58 }" :manual-pagination="true">
<template #pdf-content><article>Document content</article></template>
<template #pdf-footer="{ pageNumber, totalPages }">
<div class="report-footer">
<span>My company</span>
<span>Page {{ pageNumber }} of {{ totalPages }}</span>
</div>
</template>
</Html2Pdf>
</template>
<style scoped>
.report-footer { box-sizing: border-box; display: flex; justify-content: space-between; width: 100%; padding: 10px 20px; }
</style>
The slot activates the footer and owns visible markup. Object text, HTML, logo and template do not appear unless you render them. orientation is also a slot prop. Text mode renders supported slot text as PDF text; Canvas mode captures an image. Chrome may allow OCR selection on an image PDF, so selection alone does not prove native text is present. Scoped and inherited styles are snapshotted within renderer limits.
The built-in {total} and slot totalPages count generated pages before composition, excluding inserted template pages. See the upgrade mapping for inject-footer, footer-mode, footer-template, and use-footer-component.