PDF Styling & data-pdf-ignore

<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>

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>

<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)
</script>

<template>
  <div class="report-export">
    <button type="button" @click="pdfRef?.generatePdf()">Preview PDF</button>
    <Html2Pdf ref="pdfRef" preview-modal :enable-download="false" manual-pagination>
      <template #pdf-content>
        <article><h1>My report</h1><p>Content from my Vue app.</p></article>
      </template>
    </Html2Pdf>
  </div>
</template>

<style>
.report-export {
  --vue-pdf-preview-width: 900px;
  --vue-pdf-preview-surface: #f8fafc;
  --vue-pdf-preview-close-background: #17324a;
  --vue-pdf-preview-focus-color: #0b9668;
  --vue-pdf-loader-surface: #f8fafc;
  --vue-pdf-loader-spinner-accent: #0b9668;
}
</style>