Back to Blog List

JavaScript PDF Generation with jsPDF: 2025 Practical Guide

28 views 0 likes 0 comments 31 minutesOriginalFrontend Development

Master JavaScript PDF generation with this 2025 jsPDF tutorial, your essential guide to client-side PDF creation. Learn installation steps, practical code examples, and advanced frontend techniques to generate PDFs directly in browsers. Ideal for developers building invoice systems or document tools—elevate your frontend PDF capabilities today.

#jsPDF tutorial # JavaScript PDF generation # client-side PDF creation # jsPDF example # JavaScript PDF library # browser PDF generation # generate PDF with JavaScript # jsPDF usage # jsPDF documentation # frontend PDF generation
JavaScript PDF Generation with jsPDF: 2025 Practical Guide

jsPDF Tutorial: The Complete Guide to JavaScript PDF Generation in 2025

Meta Description: Learn how to use jsPDF for client-side PDF creation with this comprehensive 2025 tutorial. Discover JavaScript PDF generation examples, installation guides, and advanced techniques for frontend PDF generation.

In today's web development landscape, the ability to generate PDFs directly in the browser has become increasingly essential. Whether you're building an e-commerce platform needing invoice generation, a reporting tool requiring data exports, or a document management system, client-side PDF creation offers significant advantages in performance and user experience. Among the available solutions, jsPDF stands out as the most established and widely-used JavaScript PDF library, with over 30,500 stars on GitHub and 16 years of continuous development since its creation in 2009. In this comprehensive guide, we'll explore how to leverage jsPDF for browser PDF generation, from basic setup to advanced features, with practical examples that demonstrate why it remains the top choice for developers implementing generate PDF with JavaScript functionality.

Why jsPDF Leads in Client-Side PDF Creation

Before diving into the jsPDF tutorial, it's important to understand why this library has maintained its popularity for over a decade while newer alternatives have come and gone. Traditional PDF generation typically required server-side processing, involving round-trips to the server, increased latency, and higher resource consumption. jsPDF revolutionized this workflow by enabling true frontend PDF generation, processing everything locally in the user's browser.

The key advantages of jsPDF include:

  • Zero Server Dependency: Generate documents directly in the browser without backend processing
  • Reduced Bandwidth Usage: No need to transfer large data to/from servers
  • Faster Response Times: Immediate PDF creation improves user experience
  • Offline Capability: Works in Progressive Web Apps (PWAs) without internet connection
  • Complete Control: Full programmatic control over PDF content and formatting
  • Active Maintenance: Now co-maintained by yWorks, ensuring ongoing updates and support

With these benefits, it's no wonder that jsPDF has become the standard JavaScript PDF library for developers worldwide.

Getting Started: jsPDF Installation and Basic Setup

Getting started with jsPDF is straightforward, with multiple installation options to suit different development environments. Let's explore the most common methods:

Installation via Package Managers

For modern JavaScript projects using npm or yarn, installation is as simple as:

bash 复制代码 
## Using npm
npm install jspdf --save

## Using yarn
yarn add jspdf

CDN Integration

For quick prototyping or projects that prefer CDN delivery:

html 复制代码 
<!-- Stable version from jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/jspdf@latest/dist/jspdf.umd.min.js"></script>

<!-- Always latest version from unpkg -->
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>

Module Formats

jsPDF supports all modern module systems:

ES Modules (ESM):

javascript 复制代码 
import { jsPDF } from 'jspdf';

CommonJS (Node.js):

javascript 复制代码 
const { jsPDF } = require('jspdf');

AMD (Asynchronous Module Definition):

javascript 复制代码 
require(["jspdf"], ({ jsPDF }) => {
  // jsPDF available here
});

Global Scope:

javascript 复制代码 
const { jsPDF } = window.jspdf;

jsPDF Example: Creating Your First PDF Document

Now that we have jsPDF installed, let's create our first PDF document. The following jsPDF example demonstrates the basic usage pattern that forms the foundation of all jsPDF documents:

javascript 复制代码 
// Import the jsPDF library
import { jsPDF } from 'jspdf';

// Create a new instance with default parameters
// Default is A4 paper, portrait orientation, millimeters for units
const doc = new jsPDF();

// Add content to the PDF
doc.text('Hello World!', 10, 10);  // Text, x position, y position

// Save the PDF
doc.save('first-document.pdf');

This simple example creates a new PDF document, adds "Hello World!" text at position (10,10), and prompts the user to save the file as "first-document.pdf".

Customizing Document Properties

You can customize the document size, orientation, and units during initialization:

javascript 复制代码 
// Landscape orientation, inch units, custom size (4x2 inches)
const doc = new jsPDF({
  orientation: 'landscape',
  unit: 'in',
  format: [4, 2]  // [width, height]
});

// Standard paper sizes are also available
const doc = new jsPDF({
  format: 'letter',  // 'a3', 'a4', 'a5', 'letter', 'legal', etc.
  orientation: 'portrait'
});

Core jsPDF Features and Usage Examples

jsPDF offers a comprehensive API for creating rich PDF documents. Let's explore the most commonly used features with practical examples.

Adding Text Content

The text() method is fundamental for adding textual content. It supports various options for styling and alignment:

javascript 复制代码 
const doc = new jsPDF();

// Basic text with default styling
doc.text('Basic text example', 10, 10);

// Text with alignment and styling
doc.text('Right-aligned text', doc.internal.pageSize.getWidth() - 10, 20, {
  align: 'right'
});

// Multi-line text with custom font size
doc.setFontSize(16);
doc.text('Multi-line text\nThis text will appear on two lines', 10, 30);

// Restore default font size
doc.setFontSize(12);

Working with Fonts

jsPDF provides control over fonts, sizes, and styles. While the base PDF fonts only support ASCII, you can add custom fonts for full Unicode support:

javascript 复制代码 
const doc = new jsPDF();

// Set font and size
doc.setFont('helvetica', 'bold');  // font, style (normal, bold, italic, bolditalic)
doc.setFontSize(16);
doc.text('This is bold Helvetica 16pt', 10, 10);

// Reset to normal font
doc.setFont('times', 'normal');
doc.setFontSize(12);
doc.text('This is normal Times 12pt', 10, 25);

Adding Images to PDFs

Including images in your PDFs is straightforward with the addImage() method:

javascript 复制代码 
const doc = new jsPDF();

// Add image from URL (requires CORS approval)
const imgUrl = 'https://example.com/image.jpg';
doc.addImage(imgUrl, 'JPEG', 10, 10, 50, 50);  // image, format, x, y, width, height

// Add image from base64 data
const imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...';
doc.addImage(imgData, 'PNG', 70, 10, 50, 50);

Creating Multi-Page Documents

For longer documents, jsPDF makes page management simple:

javascript 复制代码 
const doc = new jsPDF();

// Content for first page
doc.text('First page content', 10, 10);

// Add new page
doc.addPage();

// Content for second page
doc.text('Second page content', 10, 10);

// Add another page with different orientation
doc.addPage('a6', 'landscape');
doc.text('Third page - A6 landscape', 10, 10);

doc.save('multi-page-document.pdf');

Advanced jsPDF Usage: HTML to PDF Conversion

One of the most powerful features of modern jsPDF is its ability to convert HTML content directly to PDF. This advanced functionality requires the optional html2canvas dependency, which renders HTML elements into canvas images that can be inserted into PDFs.

Setting Up HTML Conversion

First, install the required dependencies:

bash 复制代码 
npm install html2canvas --save

Then, you can convert HTML elements or entire pages:

javascript 复制代码 
import { jsPDF } from 'jspdf';
import html2canvas from 'html2canvas';

// Wait for DOM to be fully loaded
document.addEventListener('DOMContentLoaded', () => {
  // Get the element to convert
  const element = document.getElementById('report-content');
  
  // Create a new PDF instance
  const doc = new jsPDF('p', 'mm', 'a4');
  
  // Convert HTML to PDF
  html2canvas(element).then((canvas) => {
    // Get image data from canvas
    const imgData = canvas.toDataURL('image/png');
    
    // Calculate dimensions to fit on page
    const imgWidth = 210;  // A4 width in mm
    const imgHeight = canvas.height * imgWidth / canvas.width;
    
    // Add image to PDF
    doc.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
    
    // Save the PDF
    doc.save('html-to-pdf.pdf');
  });
});

Advanced HTML Conversion with Multiple Pages

For longer content that spans multiple pages, use the html() method introduced in newer jsPDF versions:

javascript 复制代码 
import { jsPDF } from 'jspdf';

const doc = new jsPDF({
  orientation: 'portrait',
  unit: 'mm',
  format: 'a4'
});

// Convert specific HTML element with options
doc.html(document.getElementById('long-content'), {
  callback: function(pdf) {
    pdf.save('multi-page-html.pdf');
  },
  x: 10,
  y: 10,
  width: 190,  // Target width in mm
  windowWidth: 1000  // Width of HTML viewport for rendering
});

Working with Custom Fonts and Unicode Support

The core PDF specification includes only 14 standard fonts, which are limited to ASCII characters. To support international languages or custom typography, jsPDF allows embedding TrueType fonts:

Adding Custom Fonts to jsPDF

  1. First, convert your TTF font using the jsPDF Font Converter
  2. Download the generated JavaScript file and include it in your project
  3. Use the font in your PDF:
javascript 复制代码 
// After including the generated font file
const doc = new jsPDF();

// Set the custom font
doc.setFont('MyCustomFont', 'normal');
doc.setFontSize(14);

// Now you can use Unicode characters
doc.text('Hello World in multiple languages: 你好世界 こんにちは世界', 10, 10);
doc.save('unicode-document.pdf');

Alternative: Loading Fonts Dynamically

For more control, you can load fonts dynamically using fetch:

javascript 复制代码 
const doc = new jsPDF();

// Fetch font file
fetch('/fonts/NotoSansCJKjp-Regular.ttf')
  .then(response => response.arrayBuffer())
  .then(fontData => {
    // Convert to base64
    const base64Font = btoa(String.fromCharCode(...new Uint8Array(fontData)));
    
    // Add font to jsPDF
    doc.addFileToVFS('NotoSansCJKjp-Regular.ttf', base64Font);
    doc.addFont('NotoSansCJKjp-Regular.ttf', 'NotoSansCJKjp', 'normal');
    
    // Use the font
    doc.setFont('NotoSansCJKjp', 'normal');
    doc.text('日本語のテキストを追加できます', 10, 10);  // Japanese text
    doc.save('japanese-document.pdf');
  });

Real-World Applications: jsPDF Use Cases

jsPDF's versatility makes it suitable for a wide range of applications. Here are some common real-world scenarios where jsPDF excels:

E-commerce Invoice Generation

javascript 复制代码 
function generateInvoice(orderData) {
  const doc = new jsPDF({
    orientation: 'portrait',
    unit: 'mm',
    format: 'a4'
  });
  
  // Company header
  doc.setFontSize(18);
  doc.text('ACME Corporation', 10, 15);
  doc.setFontSize(12);
  doc.text('123 Business Avenue', 10, 25);
  doc.text('New York, NY 10001', 10, 35);
  
  // Invoice information
  doc.setFont('helvetica', 'bold');
  doc.text(`Invoice #${orderData.invoiceNumber}`, 150, 25, { align: 'right' });
  doc.text(`Date: ${new Date().toLocaleDateString()}`, 150, 35, { align: 'right' });
  
  // Customer information
  doc.setFont('helvetica', 'bold');
  doc.text('Bill To:', 10, 55);
  doc.setFont('helvetica', 'normal');
  doc.text(`${orderData.customer.name}`, 10, 65);
  doc.text(`${orderData.customer.address}`, 10, 75);
  doc.text(`${orderData.customer.city}, ${orderData.customer.state} ${orderData.customer.zip}`, 10, 85);
  
  // Add more invoice details, line items, totals...
  
  doc.save(`Invoice-${orderData.invoiceNumber}.pdf`);
}

Data Export and Reporting

jsPDF is ideal for exporting tabular data from web applications:

javascript 复制代码 
function exportTableToPDF(tableId) {
  const table = document.getElementById(tableId);
  const rows = Array.from(table.querySelectorAll('tr'));
  
  const doc = new jsPDF('l', 'mm', 'a4');
  let yPosition = 10;
  
  // Add table header
  doc.setFont('helvetica', 'bold');
  doc.setFontSize(14);
  doc.text('Sales Report', 10, yPosition);
  yPosition += 10;
  
  // Configure table styling
  const pageWidth = doc.internal.pageSize.getWidth();
  const columnWidth = pageWidth / 5 - 10; // 5 columns
  
  // Add column headers
  doc.setFontSize(12);
  const headers = Array.from(rows[0].querySelectorAll('th')).map(th => th.textContent);
  
  headers.forEach((header, i) => {
    doc.text(header, 10 + (i * columnWidth), yPosition);
  });
  
  yPosition += 8;
  doc.setLineWidth(0.5);
  doc.line(10, yPosition, pageWidth - 10, yPosition);
  yPosition += 5;
  
  // Add table data
  doc.setFont('helvetica', 'normal');
  doc.setFontSize(10);
  
  rows.slice(1).forEach(row => {
    // Check if we need a new page
    if (yPosition > 280) {
      doc.addPage();
      yPosition = 10;
    }
    
    const cells = Array.from(row.querySelectorAll('td')).map(td => td.textContent);
    cells.forEach((cell, i) => {
      doc.text(cell, 10 + (i * columnWidth), yPosition);
    });
    
    yPosition += 7;
  });
  
  doc.save('sales-report.pdf');
}

Dynamic Certificate Generation

Create personalized certificates or documents:

javascript 复制代码 
function generateCertificate(name, course) {
  const doc = new jsPDF({
    orientation: 'landscape',
    unit: 'mm',
    format: 'a4'
  });
  
  // Add decorative border
  const pageWidth = doc.internal.pageSize.getWidth();
  const pageHeight = doc.internal.pageSize.getHeight();
  doc.setLineWidth(2);
  doc.rect(15, 15, pageWidth - 30, pageHeight - 30);
  
  // Add title
  doc.setFont('times', 'bolditalic');
  doc.setFontSize(30);
  doc.text('CERTIFICATE OF COMPLETION', pageWidth / 2, 50, { align: 'center' });
  
  // Add subtitle
  doc.setFontSize(16);
  doc.text('This is to certify that', pageWidth / 2, 80, { align: 'center' });
  
  // Add recipient name
  doc.setFont('times', 'bold');
  doc.setFontSize(24);
  doc.text(name.toUpperCase(), pageWidth / 2, 110, { align: 'center' });
  
  // Add course information
  doc.setFont('times', 'italic');
  doc.setFontSize(16);
  doc.text(`has successfully completed the course:`, pageWidth / 2, 140, { align: 'center' });
  
  doc.setFont('times', 'bolditalic');
  doc.text(course, pageWidth / 2, 160, { align: 'center' });
  
  // Add date and signature
  const today = new Date().toLocaleDateString('en-US', { 
    year: 'numeric', 
    month: 'long', 
    day: 'numeric' 
  });
  
  doc.setFont('times', 'normal');
  doc.setFontSize(12);
  doc.text(`Date: ${today}`, pageWidth / 2, 200, { align: 'center' });
  
  doc.text('_________________________', pageWidth / 2, 240, { align: 'center' });
  doc.text('Instructor Signature', pageWidth / 2, 250, { align: 'center' });
  
  doc.save(`Certificate-${name.replace(' ', '-')}.pdf`);
}

jsPDF Performance Optimization Guide

For complex documents or large datasets, optimizing jsPDF performance becomes important. Here are key strategies:

1. Batch Operations

Minimize context switches by batching similar operations:

Last Updated：2025-09-20 09:26:04

Comments (0)

Post Comment

Loading...
0/500
Loading comments...