Compose Existing PDF Pages

composition.prepend and composition.append insert whole PDF pages before and after generated pages. They do not overlay a page. A two-page template on both sides adds four pages.

<script setup lang="ts">
import { ref } from 'vue'
import { Html2Pdf } from 'vue-pdf-export'
import type { PdfCompositionOptions } from 'vue-pdf-export'
import 'vue-pdf-export/style.css'

const pdfRef = ref<InstanceType<typeof Html2Pdf> | null>(null)
const templatePdf = ref<Blob | null>(null)
const composition = ref<PdfCompositionOptions>({})

function chooseTemplate(event: Event) {
  const file = (event.target as HTMLInputElement).files?.[0]
  if (file) {
    templatePdf.value = file
    composition.value = { prepend: file, append: file }
  }
}

async function exportPdf() {
  if (!templatePdf.value) return
  await pdfRef.value?.generatePdf({ composition: composition.value })
}
</script>

<template>
  <input type="file" accept="application/pdf,.pdf" @change="chooseTemplate">
  <button type="button" :disabled="!templatePdf" @click="exportPdf">Export combined PDF</button>
  <Html2Pdf ref="pdfRef" :manual-pagination="true" :enable-download="true" :composition="composition">
    <template #pdf-content><article>Generated document</article></template>
  </Html2Pdf>
</template>

PdfTemplateSource accepts Blob, ArrayBuffer, Uint8Array, or a URL string pointing to a real PDF. Browser fetch() of remote URLs needs CORS access. Password-protected template PDFs may not load; verify the source before export. The same source used twice is resolved once per generation. The composition engine loads only when needed.

Method generatePdf({ composition }) takes precedence over the composition prop. The object prop takes precedence over the older convenience pair pdf-template and template-position="prepend|append|both"; the legacy pair defaults to prepend. Composition can also be passed through the lower-level options. Generated headers, footers, watermarks and {total} are applied before inserted pages, so their page numbering excludes templates. Cancellation is checked around fetch, parsing and serialization. The implementation reapplies metadata and encryption to the combined output when configured, but test the resulting permissions and metadata in your target viewers.

For Blob/ArrayBuffer/Base64 output, see the programmatic API. The playground offers composition upload and page-order checks.