¿Cómo generar archivos PDF en Webflow Cloud sin usar Puppeteer ni servicios externos?

Convertir datos estructurados en un PDF limpio es una necesidad recurrente en los sitios de Webflow, desde facturas hasta contratos o certificados. El enfoque habitual depende de un servicio de documentos externo como DocuSign y un paso de automatización para conectarlo, lo cual funciona, pero añade otra herramienta y un coste recurrente a tu infraestructura.

En la mayoría de los casos, no necesitas nada de eso. Webflow Cloud ejecuta una aplicación Next.js completa, por lo que un generador de PDF es simplemente un gestor de rutas que toma los datos de un formulario y devuelve un archivo.

Lo que suele confundir a la gente es la librería. La mayoría de los tutoriales sobre PDF utilizan Puppeteer, que renderiza HTML en una instancia de Chrome sin interfaz, pero Puppeteer no funciona en Webflow Cloud porque el entorno de ejecución de Workers no incluye el binario de Chromium.

La librería que sí funciona es pdf-lib: JavaScript puro, sin dependencias nativas, y funciona en cualquier entorno de ejecución de JavaScript, incluidos los Workers. La limitación que impone, al dibujar el documento mediante programación en lugar de usar HTML, resulta ser una ventaja, ya que el resultado es determinista y rápido. Aquí te explico cómo construirlo.

¿Qué necesitas para crear una aplicación de generación de documentos en Webflow Cloud?

Necesitas un proyecto de Next.js en Webflow Cloud y el paquete pdf-lib. No se requieren servicios externos ni claves de API para la construcción básica. Todo se ejecuta dentro de la misma aplicación.

Revisa estos requisitos antes de continuar:

• Un proyecto de Webflow Cloud ejecutando una aplicación Next.js, ya sea desplegada o en desarrollo local
• El paquete pdf-lib para la generación de PDF (JS puro, compatible con edge)
• Node.js 22.13.0 o superior en local, el requisito mínimo establecido por Webflow CLI 2.0
• Opcional: Webflow Cloud Object Storage si deseas guardar los documentos generados en lugar de solo transmitirlos al usuario

Una vez que tengas esto listo, crear un generador de documentos te llevará aproximadamente una hora.

6 pasos para crear una aplicación de generación de documentos en Webflow Cloud

La arquitectura es sencilla. Un componente de cliente renderiza el formulario donde el usuario introduce los datos del documento. Al enviarlo, se realiza una petición POST a un gestor de rutas. El gestor de rutas utiliza pdf-lib para dibujar el documento y devuelve los bytes del PDF con una cabecera Content-Type: application/pdf.

El navegador previsualiza el PDF o lo descarga. Si necesitas un registro de los documentos generados, un paso opcional permite escribir el PDF en Webflow Cloud Object Storage y almacenar una referencia en el Key Value Store.

Mantengo la lógica de dibujo en un módulo separado del gestor de rutas. El gestor valida la entrada y maneja la capa HTTP; el módulo sabe cómo dibujar una factura. Esa separación me ha salvado cada vez que un cliente pide un segundo tipo de documento, porque el segundo tipo es simplemente un nuevo módulo de dibujo en lugar de un nuevo endpoint.

1. Instala pdf-lib en tu proyecto de Webflow Cloud

Desde la raíz de tu proyecto Next.js en Webflow Cloud, instala la librería:

npm install pdf-lib

Si tus documentos requieren una fuente personalizada (cualquiera que no sea una de las 14 fuentes estándar de PDF como Helvetica o Times Roman), instala también fontkit:

npm install @pdf-lib/fontkit

pdf-lib está escrito en TypeScript y compilado a JavaScript puro sin dependencias nativas. Esta es la propiedad clave para Webflow Cloud: se ejecuta en el entorno de ejecución de Workers, donde Puppeteer y otros generadores basados en Chromium fallan. Sin configuración de compilación, sin binarios, sin variables de entorno.

2. Crea el módulo de dibujo de PDF para tu generador de documentos

Crea un módulo que tome datos estructurados y devuelva bytes de PDF. Este ejemplo dibuja una factura, pero el mismo patrón sirve para cualquier tipo de documento. Mantén esto separado del Route Handler para que cada tipo de documento sea su propio módulo.

Aquí tienes el fragmento:

// lib/documents/invoice.ts
import { PDFDocument, StandardFonts, rgb } from 'pdf-lib'

export type InvoiceData = {
  invoiceNumber: string
  date: string
  billTo: { name: string; email: string; address: string }
  lineItems: { description: string; quantity: number; unitPrice: number }[]
  notes?: string
}

export async function generateInvoicePdf(data: InvoiceData): Promise<Uint8Array> {
  const pdfDoc = await PDFDocument.create()
  let page = pdfDoc.addPage([595, 842]) // A4 in points
  const { width, height } = page.getSize()

  const helvetica = await pdfDoc.embedFont(StandardFonts.Helvetica)
  const helveticaBold = await pdfDoc.embedFont(StandardFonts.HelveticaBold)

  const margin = 50
  let cursorY = height - margin

  // Header
  page.drawText('INVOICE', {
    x: margin,
    y: cursorY,
    size: 28,
    font: helveticaBold,
    color: rgb(0.1, 0.1, 0.1),
  })

  page.drawText(`#${data.invoiceNumber}`, {
    x: width - margin - 120,
    y: cursorY,
    size: 14,
    font: helvetica,
    color: rgb(0.4, 0.4, 0.4),
  })

  cursorY -= 50

  // Bill-to block
  page.drawText('Bill To:', { x: margin, y: cursorY, size: 11, font: helveticaBold })
  cursorY -= 16
  page.drawText(data.billTo.name, { x: margin, y: cursorY, size: 11, font: helvetica })
  cursorY -= 14
  page.drawText(data.billTo.email, { x: margin, y: cursorY, size: 11, font: helvetica })
  cursorY -= 14
  page.drawText(data.billTo.address, { x: margin, y: cursorY, size: 11, font: helvetica })

  page.drawText(`Date: ${data.date}`, {
    x: width - margin - 120,
    y: cursorY + 28,
    size: 11,
    font: helvetica,
  })

  cursorY -= 50

  // Line items table header
  page.drawText('Description', { x: margin, y: cursorY, size: 10, font: helveticaBold })
  page.drawText('Qty', { x: 360, y: cursorY, size: 10, font: helveticaBold })
  page.drawText('Unit', { x: 420, y: cursorY, size: 10, font: helveticaBold })
  page.drawText('Total', { x: 490, y: cursorY, size: 10, font: helveticaBold })

  cursorY -= 6
  page.drawLine({
    start: { x: margin, y: cursorY },
    end: { x: width - margin, y: cursorY },
    thickness: 1,
    color: rgb(0.8, 0.8, 0.8),
  })
  cursorY -= 18

  // Line items
  let grandTotal = 0
  for (const item of data.lineItems) {
    const lineTotal = item.quantity * item.unitPrice
    grandTotal += lineTotal

    page.drawText(item.description, { x: margin, y: cursorY, size: 10, font: helvetica })
    page.drawText(String(item.quantity), { x: 360, y: cursorY, size: 10, font: helvetica })
    page.drawText(`$${item.unitPrice.toFixed(2)}`, { x: 420, y: cursorY, size: 10, font: helvetica })
    page.drawText(`$${lineTotal.toFixed(2)}`, { x: 490, y: cursorY, size: 10, font: helvetica })
    cursorY -= 18
  }

  // Grand total
  cursorY -= 10
  page.drawText('Total:', { x: 420, y: cursorY, size: 12, font: helveticaBold })
  page.drawText(`$${grandTotal.toFixed(2)}`, { x: 490, y: cursorY, size: 12, font: helveticaBold })

  // Optional notes
  if (data.notes) {
    cursorY -= 50
    page.drawText('Notes:', { x: margin, y: cursorY, size: 10, font: helveticaBold })
    cursorY -= 14
    page.drawText(data.notes, { x: margin, y: cursorY, size: 10, font: helvetica })
  }

  return await pdfDoc.save()
}

pdf-lib dibuja con el origen en la esquina inferior izquierda, por lo que las coordenadas y aumentan desde abajo. Llevo el control de una variable cursorY, que voy disminuyendo a medida que bajo por la página. Esto permite manejar contenido de longitud variable (cualquier cantidad de elementos) sin tener que fijar posiciones manualmente.

3. Crea el Route Handler de generación de documentos en Webflow Cloud

El Route Handler recibe los datos del formulario, los valida, llama al módulo de dibujo y devuelve el PDF. No añadas export const runtime = 'edge'. Webflow Cloud despliega Next.js a través del adaptador OpenNext Cloudflare, que no es compatible con el entorno de ejecución Edge de Next.js, por lo que la directiva rompería la compilación. Los Route Handlers se ejecutan en el entorno Node.js sobre los Workers.

Así es como se ve:

// app/api/documents/invoice/route.ts
import { NextResponse, type NextRequest } from 'next/server'
import { generateInvoicePdf, type InvoiceData } from '@/lib/documents/invoice'

export async function POST(request: NextRequest) {
  let data: InvoiceData

  try {
    data = await request.json() as InvoiceData
  } catch {
    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 })
  }

  // Validate required fields before drawing anything.
  if (!data.invoiceNumber || !data.billTo?.name || !data.lineItems?.length) {
    return NextResponse.json(
      { error: 'Missing required fields: invoiceNumber, billTo.name, lineItems' },
      { status: 422 }
    )
  }

  const pdfBytes = await generateInvoicePdf(data)

  // Return the PDF as a downloadable file.
  return new NextResponse(pdfBytes as BodyInit, {
    status: 200,
    headers: {
      'Content-Type': 'application/pdf',
      'Content-Disposition': `attachment; filename="invoice-${data.invoiceNumber}.pdf"`,
    },
  })
}

Configura Content-Disposition como attachment para forzar la descarga, o inline si prefieres que el PDF se abra directamente en el visor del navegador. El pdfBytes de pdf-lib es un Uint8Array, que es un cuerpo de respuesta válido en el entorno de ejecución de Workers.

4. Crea la interfaz de usuario del generador de documentos

El componente de cliente renderiza el formulario y gestiona el envío.

Al enviar, realiza un POST con los datos del formulario y activa la descarga desde el blob de PDF devuelto:

// app/document-builder/InvoiceBuilder.tsx
'use client'

import { useState } from 'react'

type LineItem = { description: string; quantity: number; unitPrice: number }

export default function InvoiceBuilder() {
  const [invoiceNumber, setInvoiceNumber] = useState('')
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [address, setAddress] = useState('')
  const [lineItems, setLineItems] = useState<LineItem[]>([
    { description: '', quantity: 1, unitPrice: 0 },
  ])
  const [generating, setGenerating] = useState(false)

  function updateLineItem(index: number, field: keyof LineItem, value: string) {
    setLineItems((prev) =>
      prev.map((item, i) =>
        i === index
          ? { ...item, [field]: field === 'description' ? value : Number(value) }
          : item
      )
    )
  }

  function addLineItem() {
    setLineItems((prev) => [...prev, { description: '', quantity: 1, unitPrice: 0 }])
  }

  async function generate() {
    if (!invoiceNumber.trim() || !name.trim() || generating) return
    setGenerating(true)

    const res = await fetch('/api/documents/invoice', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        invoiceNumber,
        date: new Date().toLocaleDateString(),
        billTo: { name, email, address },
        lineItems,
      }),
    })

    if (!res.ok) {
      setGenerating(false)
      return
    }

    // Turn the PDF response into a download.
    const blob = await res.blob()
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `invoice-${invoiceNumber}.pdf`
    a.click()
    URL.revokeObjectURL(url)

    setGenerating(false)
  }

  return (
    <div className="document-builder">
      <h1>Invoice Builder</h1>

      <div className="builder-field">
        <label>Invoice Number</label>
        <input value={invoiceNumber} onChange={(e) => setInvoiceNumber(e.target.value)} />
      </div>

      <div className="builder-field">
        <label>Client Name</label>
        <input value={name} onChange={(e) => setName(e.target.value)} />
      </div>

      <div className="builder-field">
        <label>Client Email</label>
        <input value={email} onChange={(e) => setEmail(e.target.value)} />
      </div>

      <div className="builder-field">
        <label>Billing Address</label>
        <input value={address} onChange={(e) => setAddress(e.target.value)} />
      </div>

      <h2>Line Items</h2>
      {lineItems.map((item, i) => (
        <div key={i} className="line-item-row">
          <input
            placeholder="Description"
            value={item.description}
            onChange={(e) => updateLineItem(i, 'description', e.target.value)}
          />
          <input
            type="number"
            placeholder="Qty"
            value={item.quantity}
            onChange={(e) => updateLineItem(i, 'quantity', e.target.value)}
          />
          <input
            type="number"
            placeholder="Unit price"
            value={item.unitPrice}
            onChange={(e) => updateLineItem(i, 'unitPrice', e.target.value)}
          />
        </div>
      ))}

      <button onClick={addLineItem} className="add-line-item">
        + Add line item
      </button>

      <button onClick={generate} disabled={generating || !invoiceNumber.trim()}>
        {generating ? 'Generating...' : 'Generate PDF'}
      </button>
    </div>
  )
}

Cuando el usuario hace clic en Generar, el componente envía el estado del formulario al Route Handler mediante POST, recibe el PDF como un blob binario y activa una descarga en el navegador con el nombre del número de factura. El estado deshabilitado del botón y el retorno anticipado en generate() evitan envíos vacíos o duplicados mientras hay una solicitud en curso.

5. Añade el generador de documentos a una página de Webflow Cloud

Dado que InvoiceBuilder es un componente de cliente, la página que lo aloja es un contenedor de componente de servidor:

// app/document-builder/page.tsx
import InvoiceBuilder from './InvoiceBuilder'

export default function DocumentBuilderPage() {
  return (
    <main className="builder-page">
      <InvoiceBuilder />
    </main>
  )
}

El generador de documentos ya está activo en /document-builder dentro de tu aplicación Webflow Cloud. Móntalo en la ruta que configuraste en Ajustes del sitio > Webflow Cloud. Si el generador debe estar restringido a usuarios registrados, protégelo con el middleware de autenticación del entorno Edge en middleware.ts.

6. Guarda los documentos generados en Webflow Cloud Object Storage

Este paso es opcional. Si solo necesitas entregar el PDF al usuario, los pasos del 1 al 5 son suficientes. Si necesitas un registro de cada documento generado (para auditorías, reenvíos o una página de "mis documentos"), guarda el PDF en Webflow Cloud Object Storage y almacena una referencia en el Key Value Store.

Primero, declara ambos enlaces en wrangler.json:

{
  "r2_buckets": [
    { "binding": "DOCUMENTS_BUCKET", "bucket_name": "generated-documents" }
  ],
  "kv_namespaces": [
    { "binding": "DOCUMENTS_KV", "id": "your-kv-namespace-id" }
  ]
}

Luego, amplía el Route Handler para realizar la persistencia antes de devolver la respuesta:

// Top of the file:
import { getCloudflareContext } from '@opennextjs/cloudflare'

// Inside the POST handler, after generating pdfBytes:
const { env } = getCloudflareContext()

const objectKey = `invoices/${data.invoiceNumber}-${Date.now()}.pdf`

// Store the PDF bytes in Object Storage.
await env.DOCUMENTS_BUCKET.put(objectKey, pdfBytes, {
  httpMetadata: { contentType: 'application/pdf' },
})

// Store a lightweight reference in the KV Store for listing.
await env.DOCUMENTS_KV.put(
  `invoice:${data.invoiceNumber}`,
  JSON.stringify({
    objectKey,
    client: data.billTo.name,
    createdAt: new Date().toISOString(),
  })
)

Ahora, cada factura generada se puede recuperar más tarde mediante su clave, y puedes crear una página de lista de documentos que lea desde el KV Store y sirva los PDF desde Object Storage. En los proyectos donde he añadido esto, la lista de documentos se convirtió en la función que más utilizaban los clientes.

¿Qué hace que una aplicación de creación de documentos falle en Webflow Cloud?

La mayoría de los fallos se deben a una de estas cuatro causas: importar una biblioteca que requiere funciones internas de Node.js que el entorno de ejecución de Workers no proporciona, no registrar una fuente, texto que se desborda de la página o devolver un tipo de cuerpo de respuesta incorrecto. Cada uno de estos problemas aparece de forma predecible.

Los síntomas que se describen a continuación corresponden a estas causas, junto con su solución.

La compilación falla con un error sobre un módulo de Node.js faltante

Una biblioteca que importaste depende de funciones internas de Node.js que el entorno de ejecución de Workers no proporciona. Casi siempre se trata de Puppeteer, (que necesita , no disponible en Webflow Cloud), o de una biblioteca de PDF que ejecuta un binario externo.pdfkitnode:fs

Confirma que estás usando , que es JavaScript puro. Si necesitas específicamente renderizado de HTML a PDF, esa carga de trabajo debe realizarse en un servicio de Node.js independiente, no en un controlador de rutas de Webflow Cloud.pdf-lib

Las fuentes personalizadas generan el error "fontkit not registered"

pdf-libsolo incrusta fuentes personalizadas cuando fontkit está registrado. Instala , luego llama a antes de con los bytes de tu fuente. Las 14 fuentes estándar de PDF (Helvetica, Times Roman, Courier y sus variantes) no necesitan fontkit; funcionan directamente mediante .@pdf-lib/fontkitpdfDoc.registerFontkit(fontkit)embedFontStandardFonts

El texto se desborda de la página o se superpone

pdf-libno ajusta el texto automáticamente. Las descripciones largas se salen del borde de la página. Mide el ancho del texto con y divídelo en varias líneas antes de dibujarlo, o trúncalo con puntos suspensivos.font.widthOfTextAtSize(text, size)

Para documentos con una longitud de contenido impredecible, añade una página cuando caiga por debajo de tu margen inferior: .cursorYif (cursorY < margin) { page = pdfDoc.addPage([595, 842]); cursorY = height - margin }

El PDF descargado está vacío o corrupto

La causa más común es devolver un tipo de cuerpo incorrecto. devuelve un . Pásalo directamente como el cuerpo de la respuesta; no lo o lo envuelvas en un objeto. Confirma también que el encabezado sea y no .pdfDoc.save()Uint8ArrayJSON.stringifyContent-Typeapplication/pdf,application/json

Amplía tu aplicación de creación de documentos en Webflow Cloud

La compilación de esta guía genera un tipo de documento a partir de un formulario. La misma arquitectura permite escalar hasta una plataforma de documentos completa.

Para admitir varios tipos de documentos, añade un nuevo módulo de dibujo para cada tipo (, ) y un controlador de rutas correspondiente. La interfaz del formulario se convierte en un selector de tipo que dirige al endpoint correcto.lib/documents/contract.tslib/documents/certificate.ts

Para extraer datos de tu CMS en lugar de usar un formulario manual, obtén el elemento del CMS de Webflow correspondiente en el controlador de rutas antes de generar el documento. Un generador de certificados, por ejemplo, puede tomar un ID de curso del CMS, buscar los detalles del curso y del estudiante, y dibujar el certificado sin necesidad de introducir datos en un formulario.

Para rellenar documentos previamente a partir de archivos PDF existentes, utiliza la capacidad de relleno de formularios de . Carga una plantilla PDF con , obtén su formulario con y establece los valores de los campos. Este es el enfoque correcto para formularios gubernamentales o legales que deben coincidir exactamente con un diseño oficial.pdf-libPDFDocument.loadgetForm