API

PDF Styling & data-pdf-ignore

Customize export-only page and body styles, CSS classes, themes and auto-fit behavior, and exclude screen-only elements using data-pdf-ignore.

Exclude content from the PDF

Use data-pdf-ignore for controls, helper UI, debug panels, buttons, or any subtree that should stay visible in the application but not appear in the generated PDF.

<div>
  <h1>Invoice</h1>

  <button data-pdf-ignore>
    Edit invoice
  </button>

  <aside data-pdf-ignore="true">
    This entire subtree is excluded from the PDF.
  </aside>

  <p data-pdf-ignore="false">
    Explicit false keeps this content in the PDF.
  </p>
</div>

Markup	PDF behavior
`data-pdf-ignore`	excluded
`data-pdf-ignore="true"`	excluded
`data-pdf-ignore="false"`	included

Ignored content is removed only from the temporary export copy and is also excluded from export pagination measurements.

Export-only styling

import type {
  PdfPageContext,
  PdfStyle,
  PdfStylingOptions,
} from 'vue-pdf-export'

const bodyStyle: PdfStyle = {
  padding: '16px',
  fontSize: '14px',
  color: '#17324A',
}

const styling: PdfStylingOptions = {
  enabled: true,

  pageBackground: '#FFF8E7',
  bodyBackground: '#F8FAFC',

  pageClass: 'invoice-page',
  bodyClass: 'invoice-body',

  pageStyle: ({ pageNumber }: PdfPageContext) => ({
    padding: '24px',
    border: '2px solid #DCE7E9',
    borderRadius: '12px',
    backgroundColor: pageNumber === 1 ? '#FFF7ED' : '#FFFFFF',
  }),

  bodyStyle,

  cssText: `
    .invoice-title {
      font-size: 28px;
      letter-spacing: -0.02em;
    }

    .screen-only {
      display: none;
    }
  `,

  printStylesheetUrls: [
    '/pdf/invoice-print.css',
  ],

  theme: 'light',

  autoFit: {
    enabled: true,
    minScale: 0.6,
    maxScale: 1,
    allowUpscale: false,
  },
}

<Html2Pdf :styling="styling">
  <template #pdf-content>
    <article>
      <h1 class="invoice-title">Invoice</h1>
      <button class="screen-only">Application action</button>
    </article>
  </template>
</Html2Pdf>

Styling options

Option	Type	Purpose
`enabled`	`boolean`	Master styling switch.
`pageBackground`	`string`	PDF page surface background.
`bodyBackground`	`string`	Inner body/content surface background.
`pageClass`	`string`	Export-only page class names.
`bodyClass`	`string`	Export-only body class names.
`pageStyle`	`PdfStyle \	PdfStyleResolver`
`bodyStyle`	`PdfStyle`	Static body styles.
`cssText`	`string`	Export-only scoped CSS text.
`stylesheetUrls`	`string[]`	External export stylesheet URLs.
`printStylesheetUrls`	`string[]`	External print/export stylesheet URLs.
`theme`	`'current' \	'light' \
`autoFit`	`boolean \	PdfAutoFitOptions`

Temporary export styles, themes, stylesheets, and staging DOM are cleaned up after generation.

TypeScript

Use the TypeScript declarations and public types shipped by vue-pdf-export for PDF outputs, component options, events, headers, footers and watermark configuration.

Full README Reference

Read the complete vue-pdf-export v1.1.0 package reference, including installation, rendering modes, API options, output formats, styling and production guidance.