Print button

Opens the browser's print dialog, and keeps itself off the printed page.

Open in demo

Open in demo

<script setup lang="ts">
import PrintButton from '@shared/components/common/PrintButton.vue'
</script>

<template>
  <div class="space-y-2">
    <PrintButton />
    <p class="text-sm text-muted-foreground">
      Pressing it opens your browser's print dialog.
    </p>
  </div>
</template>

Usage

No props, no events. It calls window.print().

It carries sa-no-print, so it is not on the sheet it prints. That class is the template's own print utility, and anything else you do not want printed can take it too.

Where it appears on its own

The page header renders one automatically when the route carries meta.printable:

{
  path: '/apps/invoice/:id',
  meta: { title: 'Invoice', printable: true },
}

Do not set that on a list page. DataTable's toolbar ships its own print button, so a printable list page shows two. Keep it for printables that are not tables: an invoice, a report, a detail page.

Example

<script setup lang="ts">
import PrintButton from '@shared/components/common/PrintButton.vue'
import { Card, CardContent, CardHeader, CardTitle } from '@shared/components/ui/card'
</script>

<template>
  <Card class="max-w-md">
    <CardHeader class="flex-row items-center justify-between gap-4">
      <CardTitle>Invoice INV-2043</CardTitle>
      <PrintButton />
    </CardHeader>
    <CardContent class="space-y-1 text-sm">
      <p>Northwind</p>
      <p class="text-muted-foreground">
        Due 31 March 2026
      </p>
      <p class="text-lg font-semibold tabular-nums">
        $1,240.00
      </p>
    </CardContent>
  </Card>
</template>

API

Source: src/shared/components/common/PrintButton.vue

Props

None.

Emits

None.

Slots

None.

Accessibility

• It is an ordinary button with a visible label beside the icon.
• It is in the tab order and fires on Enter and Space, because it is a real button rather than a clickable icon.

Related

• Page header
• DataTable
• Export button