Botón de impresión / PDF con soporte de PrintArea para imprimir solo una región de la página.
pnpm dlx nuvo-ui add print-button
Imprimir toda la página
Imprimir solo una región (PrintArea)
Reporte mensual 2024
Ventas, usuarios y churn por mes
Mes
Ventas
Usuarios
Churn
Enero
$48,000
1,200
2.1%
Febrero
$52,000
1,350
1.8%
Marzo
$61,000
1,500
2.4%
Abril
$55,000
1,420
1.9%
Mayo
$70,000
1,680
1.5%
Variantes
Uso
import { PrintButton, PrintArea } from "@nuvo-ui/ui"
// Imprime toda la página
<PrintButton label="Imprimir" />
// Imprime solo el área con id="mi-reporte"
<PrintButton selector="#mi-reporte" label="Imprimir reporte" />
<PrintArea id="mi-reporte">
{/* Solo este contenido se imprime */}
<table>...</table>
</PrintArea>
Props — PrintButton
Prop
Tipo
Default
Descripción
label
string
"Imprimir"
Texto del botón
selector
string
—
CSS selector del elemento a imprimir. Sin selector imprime toda la página
variant
"default" | "outline" | "ghost"
"outline"
Estilo visual
size
"sm" | "md" | "lg"
"md"
Tamaño
onBefore
() => void
—
Callback antes de imprimir
onAfter
() => void
—
Callback después de imprimir
Props — PrintArea
Prop
Tipo
Default
Descripción
id
string
"print-area"
ID del área. Debe coincidir con el selector de PrintButton