Todos los componentes (204)

Botón de exportar

Acciones · ExportButton

Qué es y cuándo usarlo

Baja un gráfico, una tabla o cualquier trozo de la página como imagen: PNG, SVG o PDF. Todo ocurre en el navegador y sin librerías: el elemento se copia con los estilos que el navegador ya calculó, se mete en un SVG y de ahí salen los tres formatos.

Cuándo usarlo

Junto a un gráfico o un cuadro de mando que la gente quiere pegar en una presentación o un informe.
target es una referencia (useRef) al elemento, o una función que lo busca. filename es el nombre del fichero, sin extensión.
formats para ofrecer menos: con uno solo, el botón exporta directamente en vez de abrir el menú.
scale son los píxeles reales por píxel de CSS en el PNG y el PDF: 2 por defecto, 4 para imprimir.

Cuándo no

Exportar los DATOS de una tabla: exportCsv en Table.
Generar el fichero en el servidor: aquí no hay estilos calculados que copiar. Con un navegador sin cabeza (Playwright) que abra la página se llaman las mismas funciones, exportElement, elementToPng, elementToSvg y elementToPdf.

Teclado: Tab llega al botón; Intro o Espacio abren el menú de formatos, las flechas lo recorren y Escape lo cierra devolviendo el foco al botón.

Accesibilidad: el resultado («Exportado como PNG») y el fallo se anuncian en una región de estado. El PDF lleva la imagen, no el texto seleccionable: para un documento accesible, ofrece también los datos en tabla.

Aspecto fino: sin variables propias. Es un Button (outline por defecto, con variant, tone y size) y un ActionMenu.

Las tipografías web se incrustan si su hoja de estilos es del mismo origen o admite CORS; si no, el texto sale con la de respaldo.

Cómo se ve

Pedidos por semana
Periodo	Pedidos
S1	12
S2	19
S3	15
S4	24

const informe = useRef(null)

<div ref={informe}>
  <LineChart label="Pedidos por semana" categories={categorias} series={series} />
</div>
<ExportButton target={informe} filename="pedidos-por-semana" formats={['png', 'pdf']} />

Props

Se importa con import { ExportButton } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`filename`obligatoria	`string`	Nombre del fichero, sin la extension.
`target`obligatoria	`ExportTarget`	Lo que se exporta: una referencia al elemento o una funcion que lo busca.
`background`	`string`	Fondo de la imagen. Por defecto, el del propio elemento.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`formats`	`readonly ExportFormat[]`	Formatos que se ofrecen. Con uno solo, el boton exporta directamente. Por defecto, PNG, SVG y PDF.
`label`	`string`	—
`onError`	`(error: unknown) => void`	Lo que se hace con un fallo. Sin esto va a la consola.
`onExported`	`(blob: Blob, format: ExportFormat) => void`	Avisa con el fichero ya generado, por si ademas de bajarlo hay que subirlo o guardarlo.
`scale`	`number`	Pixeles reales por pixel de CSS en el PNG y el PDF. 2 por defecto, 4 para imprimir.
`size`	`"sm" \| "md" \| "lg"`	—
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	—
`variant`	`"solid" \| "soft" \| "outline" \| "ghost"`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: