patternjavascriptModerate

jsPDF for client-side PDF generation without a server

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

jspdfclient-side pdfbrowser pdfhtml2canvaspdf downloadautotable

browser

Problem

Applications that need to let users download PDFs (receipts, certificates, exports) typically require a server round-trip. In some cases, generating the PDF entirely in the browser from client-side data is preferable.

Solution

Use jsPDF to generate PDFs in the browser. For text-heavy documents, use jsPDF's autoTable plugin for tables. For pixel-perfect layouts, use jsPDF with html2canvas to capture rendered HTML as an image and embed it in the PDF.

Why

jsPDF is a pure JavaScript PDF library that runs entirely in the browser. It eliminates server load for PDF generation and works offline. Useful for user-generated content, export features, and offline-capable PWAs.

Gotchas

jsPDF with html2canvas captures a rasterized screenshot — output is an image in a PDF, not selectable text
For text-heavy documents, use jsPDF's text API directly for searchable/copyable content instead of html2canvas
Custom fonts must be embedded as base64 strings; system fonts are not available in jsPDF
Large PDFs generated in the browser can cause memory issues and slow performance on mobile devices

Code Snippets

Generate a PDF from a DOM element using jsPDF and html2canvas

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

async function downloadAsPdf(elementId, filename = 'document.pdf') {
  const element = document.getElementById(elementId);
  const canvas = await html2canvas(element, { scale: 2, useCORS: true });
  const imgData = canvas.toDataURL('image/png');

  const pdf = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });
  const pageWidth = pdf.internal.pageSize.getWidth();
  const pageHeight = (canvas.height * pageWidth) / canvas.width;

  pdf.addImage(imgData, 'PNG', 0, 0, pageWidth, pageHeight);
  pdf.save(filename);
}

document.getElementById('download-btn').addEventListener('click', () => {
  downloadAsPdf('invoice-preview', 'invoice-1234.pdf');
});

Context

Client-side PDF export features where server infrastructure should be avoided

Revisions (0)

No revisions yet.