html2realpdf

Generate a real PDF, not a screenshot.

html2realpdf is a powerful solution for converting HTML content into true vector-based PDFs in the browser. Unlike traditional PDF generators that merely turn web pages into images, html2realpdf retains the integrity of text, links, and graphics ensuring they remain selectable and searchable.

Why Choose Real PDFs?

Utilizing screenshot-based tools results in images, making it impossible to extract text or copy content effectively. With html2realpdf, text remains text — enabling Unicode mappings that facilitate selection, copying, and searching directly from the PDF. This functionality is vital for applications requiring machine-readable documents without the need for OCR. Additionally, text-heavy documents maintain smaller file sizes and excellent clarity at any zoom level.

Built using Zig and compiled to WebAssembly, html2realpdf offers a seamless and efficient experience for generating invoices, reports, tickets, letters, slides, and other documents from web content.

Quick Usage Examples

Generating a PDF from an HTML element is straightforward:

import { renderPdf } from "@imggion/html2realpdf";

const invoice = document.querySelector<HTMLElement>("#invoice");
if (!invoice) throw new Error("Invoice not found");

const pdf = await renderPdf(invoice);
pdf.download("invoice.pdf");
pdf.dispose();

HTML strings can also be converted with ease:

const pdf = await renderPdf("<h1>Hello from a real PDF</h1>");

Compatibility with React and Vue

html2realpdf smoothly integrates with popular frameworks like React and Vue, allowing developers to pass references to mounted elements for PDF generation:

React Example:

const reportRef = useRef<HTMLDivElement>(null);
async function downloadReport() {
  if (!reportRef.current) return;
  const pdf = await renderPdf(reportRef);
  pdf.download("report.pdf");
  pdf.dispose();
}
return <Report ref={reportRef} />;

Vue Example:

<script setup lang="ts">
import { useTemplateRef } from "vue";
import { renderPdf } from "@imggion/html2realpdf";

const report = useTemplateRef<HTMLElement>("report");
async function downloadReport() {
  if (!report.value) return;
  const pdf = await renderPdf(report.value);
  pdf.download("report.pdf");
  pdf.dispose();
}
</script>
<template>
  <article ref="report">
    <h1>Quarterly report</h1>
    <p>This content stays selectable in the PDF.</p>
  </article>
  <button type="button" @click="downloadReport">Download PDF</button>
</template>

Previewing PDFs

A unique feature of html2realpdf is the ability to preview the generated PDF directly within your application, providing immediate feedback. This is accomplished using Shadow DOM and a canvas instead of iframes:

const pdf = await renderPdf(invoice);
const previewTarget = document.querySelector<HTMLElement>("#pdf-preview");
if (!previewTarget) throw new Error("Preview target not found");
const preview = await pdf.preview(previewTarget, { initialScale: "fit-width" });
// Dispose when no longer needed
preview.dispose();
pdf.dispose();

Performance Benchmarking

In performance tests, html2realpdf has proven to be significantly faster and more efficient than other libraries such as html2pdf.js. For example, it produces a 30-page PDF in approximately 33.1% less time, with a file size reduction of about 85.8%.

Conclusion

html2realpdf stands out with its ability to generate real, searchable, and vector-based PDFs from HTML, making it ideal for developers seeking to enhance document management and presentation capabilities within their web applications. Visit the CSS support matrix for more information on layout and rendering capabilities.