PDF Headers in Vue
Set enabled: true for a built-in header:
<script setup lang="ts">
import { Html2Pdf } from 'vue-pdf-export'
import type { HeaderOptions } from 'vue-pdf-export'
import 'vue-pdf-export/style.css'
const header: HeaderOptions = {
enabled: true,
height: 58,
pages: 'all',
text: 'Quarterly report',
showLogo: true,
logoUrl: '/logo.png',
logoWidth: 120,
logoHeight: 32,
backgroundColor: '#F5FBF9',
textColor: '#17324A',
}
</script>
<template>
<Html2Pdf :header="header" :manual-pagination="true">
<template #pdf-content><article>Document content</article></template>
</Html2Pdf>
</template>
| Field | Default | Meaning |
|---|---|---|
enabled | false | Render the header. |
height | 58 via component | Reserved height in the active jsPDF unit (px by default). |
pages | 'all' | 'all', 'first', 'last', 'except-first', or a 1-based page number array. |
text / html | empty | Plain text or trusted HTML; non-empty HTML takes precedence. |
showLogo | true | Show an available logo. |
logoUrl / logoDataUrl | empty | Logo URL or data URL. |
logoWidth / logoHeight | 28 CSS px | Maximum logo box, preserving aspect ratio. |
backgroundColor / textColor | #F8F9FA / #5F6368 | Built-in layer colors. |
Header height reserves space only on targeted generated pages. Explicit top margins still apply. Sanitize user-authored HTML before assigning it to html.
Vue header slot
<script setup lang="ts">
import { Html2Pdf } from 'vue-pdf-export'
import ReportHeader from './ReportHeader.vue'
import 'vue-pdf-export/style.css'
</script>
<template>
<Html2Pdf :header="{ height: 58, pages: 'except-first' }" :manual-pagination="true">
<template #pdf-content><article>Report body</article></template>
<template #pdf-header="{ pageNumber, totalPages, orientation }">
<ReportHeader :page-number="pageNumber" :total-pages="totalPages" :orientation="orientation" />
</template>
</Html2Pdf>
</template>
For example, ReportHeader.vue can keep its own logo and scoped styles:
<script setup lang="ts">
defineProps<{ pageNumber: number; totalPages: number; orientation: string }>()
</script>
<template>
<div class="report-header">
<img src="/logo.png" alt="Company" width="100" height="28">
<strong>Quarterly report</strong>
<small>{{ orientation }} · {{ pageNumber }}/{{ totalPages }}</small>
</div>
</template>
<style scoped>
.report-header { box-sizing: border-box; display: flex; align-items: center; gap: 16px; width: 100%; padding: 10px 20px; background: #f5fbf9; color: #17324a; }
.report-header small { margin-left: auto; }
</style>
The slot activates the header and owns visible markup. Object text, HTML, logo and colors are not injected into it; object height and pages still control layout and targeting. Give the component root width: 100% and appropriate padding. Scoped and inherited computed styles are snapshotted, subject to renderer support. Text mode emits supported text and shapes as PDF operations; Canvas mode captures an image. Inspect complex CSS and fonts in a viewer.
See footers, pagination, and the migration mapping.