Think Whale PDFs - v0 by Vercel

Let me read the actual implementation so I explain exactly what's in your project rather than from memory.

Here's the full breakdown of how this PDF button works, and—more importantly—the specific things that make it work that are almost certainly what's breaking on your other project.

The core idea

This is not a "real" text PDF. It's a screenshot-to-PDF pipeline:

The page is built as a stack of fixed-pixel-size DOM nodes (each exactly PAGE.width × PAGE.height, e.g. 1060×1056), each with a unique id.
On click, html2canvas-pro rasterizes each node into a <canvas>.
Each canvas is converted to a JPEG data URL and dropped into a jsPDF page sized to match.
pdf.save() triggers the download.

That's the whole architecture. The reason it "just works" here is a set of constraints that are easy to miss.

The non-obvious things that make it actually work

1. Every page is a fixed pixel-size element with a known id. The loop does document.getElementById(id) and passes explicit width/height/windowWidth/windowHeight to html2canvas. This is critical. If your other project relies on responsive/%/vw/flex-grow sizing, html2canvas will capture whatever the element happens to measure at that instant—often 0, clipped, or the wrong aspect ratio. The element must have deterministic, explicit dimensions.

const canvas = await html2canvas(el, {
  scale: 2.5,
  useCORS: true,
  backgroundColor: "#0A0813",
  width: PAGE.width, height: PAGE.height,
  windowWidth: PAGE.width, windowHeight: PAGE.height,
})

2. It uses html2canvas-pro, NOT html2canvas. This is the single most common reason it "massively fails." The original html2canvas (last published years ago) throws on modern CSS color functions—oklch(), lab(), color-mix(), relative colors. Tailwind v4 and shadcn output oklch() everywhere by default. The moment html2canvas hits an oklch() value it errors out with something like Attempting to parse an unsupported color function "oklch" and the whole export dies. html2canvas-pro is the maintained fork that understands those. If your other project imports html2canvas, switch to html2canvas-pro.

3. The PDF page size is derived from the same geometry as the DOM (96 DPI → inches).

const DPI = 96
const pageW = PAGE.width / DPI
const pageH = PAGE.height / DPI
const pdf = new jsPDF({ orientation: pageW >= pageH ? "landscape" : "portrait", unit: "in", format: [pageW, pageH], compress: true })

The scale: 2.5 makes the raster high-res (crisp text), but the PDF page itself stays at the physical inch size, so the big image gets shrunk down into it. If you skip this and just addImage at default sizing, you get content overflowing off the page or weird margins.

4. JPEG + compression keeps the file from being enormous. canvas.toDataURL("image/jpeg", 0.95) + compress: true + the "FAST" flag on addImage. Without this, a 9-page export with PNGs was ~139 MB. With it, ~5–10 MB. If your version uses PNG, big multi-page docs can hang the browser tab (which can look like "failing").

5. Libraries are dynamically imported inside the handler.

const [{ default: html2canvas }, { default: jsPDF }] = await Promise.all([
  import("html2canvas-pro"), import("jspdf"),
])

Both are heavy, browser-only libraries. Importing them at the top of a module can break SSR/build in Next.js (window is not defined) and bloats your initial bundle. The component is also "use client". If you're importing jsPDF/html2canvas at the top of a Server Component or a non-client module, that alone will fail the build.

The most likely culprits on your other project

In rough order of probability:

Using html2canvas instead of html2canvas-pro → dies on oklch()/Tailwind v4 colors. (Most common.)
Elements don't have fixed, explicit dimensions → blank, clipped, or 0-size captures.
Importing the libs at module top / not "use client" → SSR/build crash.
Cross-origin images without crossOrigin="anonymous" → html2canvas taints the canvas and toDataURL throws a security error. (Note every image in this project sets crossOrigin="anonymous" for exactly this reason. External images also need CORS headers from the host, and useCORS: true must be set.)
Trying to capture an element that's display:none, inside a collapsed tab, virtualized, or off-screen → html2canvas can't measure it. The nodes here are all mounted and laid out in the DOM at full size when the button is clicked.
Unsupported CSS — html2canvas-pro still doesn't render backdrop-filter, some mask, certain box-shadow/filter combos, or external web-fonts that haven't loaded yet. Wait for fonts (await document.fonts.ready) before capturing if text comes out as fallback.

Minimal portable version

"use client"
import { useState } from "react"

export function DownloadPdfButton({ pageIds, fileName = "export.pdf", width = 1060, height = 1056, bg = "#ffffff" }) {
  const [loading, setLoading] = useState(false)
  async function handleDownload() {
    if (loading) return
    setLoading(true)
    try {
      const [{ default: html2canvas }, { default: jsPDF }] = await Promise.all([
        import("html2canvas-pro"),   // <-- the -pro fork, not html2canvas
        import("jspdf"),
      ])
      await document.fonts?.ready    // make sure custom fonts are loaded
      const DPI = 96, w = width / DPI, h = height / DPI
      const landscape = w >= h
      const pdf = new jsPDF({ orientation: landscape ? "landscape" : "portrait", unit: "in", format: [w, h], compress: true })
      for (const [i, id] of pageIds.entries()) {
        const el = document.getElementById(id)
        if (!el) continue
        const canvas = await html2canvas(el, {
          scale: 2.5, useCORS: true, backgroundColor: bg,
          width, height, windowWidth: width, windowHeight: height,
        })
        const img = canvas.toDataURL("image/jpeg", 0.95)
        if (i > 0) pdf.addPage([w, h], landscape ? "landscape" : "portrait")
        pdf.addImage(img, "JPEG", 0, 0, w, h, undefined, "FAST")
      }
      pdf.save(fileName)
    } catch (err) {
      console.error("[v0] PDF export failed:", err)
    } finally { setLoading(false) }
  }
  return <button onClick={handleDownload} disabled={loading}>Download PDF</button>
}

If you tell me the exact error you're getting (check the browser console—the handler logs [v0] PDF export failed: with the real error), I can pinpoint which of these it is. My strong bet is it's #1: you're on plain html2canvas and your project uses Tailwind v4 / oklch() colors.