BookinglyTech News
Software

Lanzan vue3-pdf-export, paquete open source para generar PDFs en Vue 3

El autor publica vue3-pdf-export, una librería TypeScript para Vue 3 que permite crear PDFs desde HTML con paginación, encabezados, marcas de agua y seguridad.

2 min de lecturaDev.to0 vistas

El desarrollador Saurabh Zaiswal ha publicado vue3-pdf-export, un paquete open source para Vue 3 escrito en TypeScript que simplifica la generación de PDFs en el navegador a partir de contenido HTML. La librería envuelve a html2pdf.js, html2canvas y jsPDF, ofreciendo una capa orientada a Vue que cubre requisitos habituales como paginación automática o manual, previsualización, encabezados y pies de página personalizados, marcas de agua, compresión y protección con contraseña.

Principales características

  • Paginación: soporta quiebres automáticos y manuales mediante la clase html2pdf__page-break. Permite agrupar elementos para evitar saltos indeseados.
  • Encabezados y pies de página: pueden contener texto plano, HTML de confianza, logos y fondos personalizados. Es posible dirigirlos a todas las páginas, solo a la primera, a la última o excluir la primera, con numeración de páginas mediante plantillas como Page {n} of {total}.
  • Marcas de agua: texto o imagen, posición libre, opacidad configurable y opción de repetición o rotación.
  • Seguridad: generación de PDFs con contraseña de usuario/apertura y contraseña de propietario, con permisos ajustables.
  • Metadatos y compresión: se pueden añadir título, autor, palabras clave y activar la compresión del stream de jsPDF.
  • Informe de progreso: la librería expone estados y porcentaje de generación, útil para UI de carga.

Uso rápido

npm install vue3-pdf-export

<script setup lang="ts">
import { ref } from 'vue'
import { Html2Pdf } from 'vue3-pdf-export'
import 'vue3-pdf-export/style.css'

const pdf = ref<InstanceType<typeof Html2Pdf> | null>(null)
async function generate() {
  await pdf.value?.generatePdf()
}
</script>
<template>
  <button @click="generate">Generar PDF</button>
  <Html2Pdf ref="pdf" filename="ejemplo.pdf" :preview-modal="true">
    <template #pdf-content>
      <main>
        <h1>Hola desde Vue</h1>
        <p>Este contenido se exportará a PDF.</p>
      </main>
    </template>
  </Html2Pdf>
</template>

El componente Html2Pdf gestiona la captura del DOM, la conversión y la descarga, mientras que la opción preview-modal muestra una vista previa antes de guardar.

Compatibilidad y pruebas

El proyecto incluye pruebas automatizadas con Playwright que cubren Chromium, Firefox y WebKit, garantizando que la generación funciona en los principales motores de navegador. La versión actual es v0.2.0, que añade soporte para HTML de confianza en encabezados y pies, logos con preservación de proporción y comportamiento selectivo de encabezados.

Por qué puede interesarte

Si mantienes aplicaciones Vue 3 que requieren exportar informes, facturas o cualquier documento estructurado al formato PDF, vue3-pdf-export elimina la necesidad de crear componentes ad‑hoc para cada proyecto. Además, la posibilidad de acceder a la configuración avanzada de html2pdf.js y jsPDF permite ajustar casos extremos sin perder la simplicidad del API de alto nivel.

Para probarla, visita el live playground en vue3-pdf-export.vercel.app o instala el paquete desde npm. El autor invita a reportar bugs o proponer mejoras a través del repositorio.

Historias Relacionadas