Comparison

A real PDF alternative to html2canvas

html2canvas works by painting your DOM onto an HTML canvas element and exporting that canvas as an image. When you embed that image into a PDF using jsPDF (the most common pairing), you do not get a PDF with real text. You get a rasterized screenshot wrapped in a PDF container. Text is blurry at any zoom level, the file is significantly larger than a vector PDF, nothing is searchable or copy-pasteable, and the whole process requires a live browser DOM. PDFPipe sends your HTML to a server-side renderer and returns a real vector PDF with sharp text, standard file sizes, and full text selection, so your Tailwind or Bootstrap layout stays selectable text rather than a flattened screenshot.

PDF quality comparison

Why the canvas approach produces low-quality PDFs

An HTML canvas is a pixel grid. html2canvas iterates over your DOM and re-paints each element onto that grid, then exports the pixels as a PNG. At a scale factor of 2 (the recommended setting), a standard A4 page becomes a roughly 2480×3508 pixel image. When jsPDF embeds that image in a PDF, it is stored as a raster. Zoom in past 100% and the text blurs exactly as a low-resolution image would. Print it on a high-DPI laser printer and the same problem appears. A real PDF renderer encodes text as vector outlines and glyph references, which remain sharp at any scale.

The server-side problem

html2canvas only works where a browser DOM exists. That means you cannot generate a PDF in response to a webhook, a cron job, a queue worker, or any server-side process that does not have a browser attached. You either offload generation to the client (exposing sensitive data like invoice totals, customer names, and pricing in the browser) or spin up a headless browser just to run html2canvas, at which point you are adding significant infrastructure complexity for an output that is still rasterized. PDFPipe handles rendering on its own infrastructure and returns the finished PDF to your server.

The html2canvas approach versus PDFPipe

// The html2canvas pattern: screenshot → jsPDF embed
// Result: a rasterized image inside a PDF wrapper.
import html2canvas from "html2canvas";
import jsPDF from "jspdf";

const element = document.getElementById("invoice");
const canvas = await html2canvas(element, { scale: 2 });
const imgData = canvas.toDataURL("image/png");

const pdf = new jsPDF("p", "mm", "a4");
pdf.addImage(imgData, "PNG", 0, 0, 210, 297);
pdf.save("invoice.pdf");
// Problems: blurry text, ~3-5x larger file, zero text selectability,
// breaks on complex CSS, requires a live DOM (no server-side).

// PDFPipe: a real PDF from HTML, generated on your server.
// Text stays sharp and selectable. No browser, no DOM, no canvas.
const html = renderInvoiceTemplate(order);

const res = await fetch("https://api.pdfpipe.xyz/v1/pdf", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.PDFPIPE_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    html,
    options: { format: "A4" },
  }),
});
const pdf = await res.arrayBuffer();

When html2canvas still makes sense

html2canvas is reasonable when you need a pixel-accurate screenshot of a complex interactive canvas or WebGL visualization that cannot be described in static HTML. It also works well for generating preview thumbnails or social sharing images where raster output is acceptable and text searchability does not matter. For document generation (invoices, reports, contracts, certificates) where quality and searchability matter, a real PDF renderer is the correct tool.