Get Started

Quick Start

Generate your first PDF in Vue with the Html2Pdf component, package styles, a PDF content slot and a simple programmatic generate action.

To generate a PDF in Vue 3, install vue-pdf-export, import Html2Pdf and its stylesheet, place your content in the pdf-content slot, then call generatePdf() through a component ref. This example uses the current 1.3.0 API and runs in the browser after the component mounts. See installation first, or the Nuxt SSR guide for client-side generation in Nuxt.

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

const pdfRef = ref<InstanceType<typeof Html2Pdf> | null>(null)

async function generatePdf() {
  const blob = await pdfRef.value?.generatePdf()
  console.log(blob)
}
</script>

<template>
  <button type="button" @click="generatePdf">Generate PDF</button>

  <Html2Pdf
    ref="pdfRef"
    filename="my-report"
    render-mode="canvas"
    :manual-pagination="true"
    :enable-download="true"
  >
    <template #pdf-content>
      <div>
        <h1>My Report</h1>
        <p>This content will be rendered into the PDF.</p>
      </div>
    </template>
  </Html2Pdf>
</template>

Plain JavaScript with the Vue Options API

TypeScript is optional. Register Html2Pdf locally and call generatePdf() through a template ref. PDF generation runs in the browser after the component mounts.

<script>
import { Html2Pdf } from 'vue-pdf-export'
import 'vue-pdf-export/style.css'

export default {
  components: { Html2Pdf },
  methods: {
    async generate() {
      const blob = await this.$refs.pdf.generatePdf()
      console.log('PDF bytes:', blob.size)
    },
  },
}
</script>

<template>
  <button type="button" @click="generate">Generate PDF</button>
  <Html2Pdf ref="pdf" :enable-download="false">
    <template #pdf-content><article><h1>JavaScript report</h1></article></template>
  </Html2Pdf>
</template>

Without a pagination height, the renderer handles basic page flow. Set a positive paginateElementsByHeight when you want the smart DOM planner; see pagination. The Options API example is based on the library's npm consumer fixture.

Installation

Install vue-pdf-export with npm and add the package styles in Vue, TypeScript, Vite and Nuxt applications, with package-manager compatibility guidance.

Rendering Modes

Compare Canvas and selectable-text rendering in vue-pdf-export and choose between maximum browser visual fidelity and searchable, selectable PDF text.