🎯 Easy HTML to PDF Generator

Simple, lightweight HTML to PDF converter for web browsers. No server required - just pass a container ID and generate professional PDFs instantly!

A client-side JavaScript library that converts any HTML content to PDF with just one line of code. Perfect for generating reports, documents, receipts, or any HTML content as downloadable PDFs.

⚡ Quick Start

1. Include the library

<!-- Include jsPDF (required dependency) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

<!-- Include Easy HTML to PDF -->
<link rel="stylesheet" href="dist/easy-html-to-pdf.css">
<script src="dist/easy-html-to-pdf.js"></script>

2. Add HTML content

<div id="myContent">
    <h1>My Document</h1>
    <p>This content will be converted to PDF!</p>
    <ul>
        <li>Lists work perfectly</li>
        <li>Formatting is preserved</li>
    </ul>
</div>

3. Generate PDF

// That's it! One line of code:
EasyPDF.quick('myContent');

// Or with custom filename:
EasyPDF.quick('myContent', 'my-document.pdf');

🎨 Live Demo

🚀 Try Live Demo

Check out the examples folder for the full demo code.

🌟 Features

✅ Zero dependencies (except jsPDF)
✅ One-line generation - EasyPDF.quick('elementId')
✅ Preserves HTML formatting - Headers, lists, bold, italic
✅ Mobile responsive preview modal
✅ Framework agnostic - Works with React, Vue, Angular, vanilla JS
✅ Customizable options - Headers, footers, page numbers, margins
✅ Professional styling - Beautiful default formatting
✅ Browser compatible - All modern browsers

🌐 Supported Environments

✅ Fully Supported

Modern web browsers (Chrome, Firefox, Safari, Edge)
Static websites and HTML files
React, Vue, Angular applications
WordPress sites
E-commerce platforms
Web dashboards and admin panels
Progressive Web Apps (PWAs)

⚠️ Limited Support

Older browsers (may need polyfills)
Corporate networks (may block CDN)
Offline environments (need local jsPDF)

❌ Not Supported

Server-side Node.js applications
Native mobile apps (iOS/Android)
Email templates
Internet Explorer

🚀 Quick Start - Universal Setup

1. Basic HTML Setup

<!DOCTYPE html>
<html>
<head>
    <!-- Include jsPDF from CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    
    <!-- Include Easy PDF Generator -->
    <link rel="stylesheet" href="easy-pdf-generator.css">
    <script src="easy-pdf-generator.js"></script>
</head>
<body>
    <!-- Your content -->
    <div id="myContent">
        <h1>My Document</h1>
        <p>Content to convert to PDF</p>
    </div>
    
    <!-- Generate button -->
    <button onclick="EasyPDF.quick('myContent')">Generate PDF</button>
</body>
</html>

2. Offline/Corporate Environment Setup

<!-- Download jsPDF locally for offline use -->
<script src="./libs/jspdf.umd.min.js"></script>
<link rel="stylesheet" href="easy-pdf-generator.css">
<script src="easy-pdf-generator.js"></script>

🔧 Framework Integration

React Component

import React from 'react';

// Include scripts in public/index.html or load dynamically
const PDFGenerator = () => {
  const generatePDF = async () => {
    if (window.EasyPDF) {
      await window.EasyPDF.quick('content');
    }
  };

  return (
    <div>
      <div id="content">
        <h1>React Content</h1>
        <p>This will be converted to PDF</p>
      </div>
      <button onClick={generatePDF}>Generate PDF</button>
    </div>
  );
};

Vue.js Component

<template>
  <div>
    <div id="vue-content">
      <h1>Vue Content</h1>
      <p>This will be converted to PDF</p>
    </div>
    <button @click="generatePDF">Generate PDF</button>
  </div>
</template>

<script>
export default {
  methods: {
    async generatePDF() {
      if (window.EasyPDF) {
        await window.EasyPDF.quick('vue-content');
      }
    }
  }
}
</script>

Angular Component

import { Component } from '@angular/core';

declare global {
  interface Window {
    EasyPDF: any;
  }
}

@Component({
  selector: 'app-pdf-generator',
  template: `
    <div id="angular-content">
      <h1>Angular Content</h1>
      <p>This will be converted to PDF</p>
    </div>
    <button (click)="generatePDF()">Generate PDF</button>
  `
})
export class PdfGeneratorComponent {
  async generatePDF() {
    if (window.EasyPDF) {
      await window.EasyPDF.quick('angular-content');
    }
  }
}

WordPress Integration

// Add to theme's functions.php
function add_pdf_generator_scripts() {
    wp_enqueue_script('jspdf', 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js');
    wp_enqueue_script('easy-pdf-js', get_template_directory_uri() . '/js/easy-pdf-generator.js');
    wp_enqueue_style('easy-pdf-css', get_template_directory_uri() . '/css/easy-pdf-generator.css');
}
add_action('wp_enqueue_scripts', 'add_pdf_generator_scripts');

📱 Device Compatibility

Desktop Browsers

✅ Chrome 60+
✅ Firefox 55+
✅ Safari 12+
✅ Edge 79+

Mobile Browsers

✅ Chrome Mobile
✅ Safari Mobile (iOS 12+)
✅ Samsung Internet
⚠️ May have download limitations on some mobile browsers

🔒 Security Considerations

CSP (Content Security Policy)

<!-- Add to your CSP if using CDN -->
<meta http-equiv="Content-Security-Policy" 
      content="script-src 'self' https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline';">

Local/Offline Version

For maximum security and reliability, host jsPDF locally:

# Download jsPDF
curl -o jspdf.umd.min.js https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js

🎨 Customization Examples

Basic Usage

// Simple generation
EasyPDF.quick('myContent');

// With filename
EasyPDF.quick('myContent', 'my-document.pdf');

Advanced Options

EasyPDF.generate('myContent', {
    filename: 'report.pdf',
    pageSize: 'a4',
    orientation: 'portrait',
    addHeader: true,
    headerText: 'Company Report',
    addFooter: true,
    addPageNumbers: true,
    fontSize: 12,
    margin: 20
});

Preview Before Download

// Show preview modal
EasyPDF.quickPreview('myContent');

// Or with options
EasyPDF.preview('myContent', {
    title: 'Document Preview',
    addPageNumbers: true
});

🐛 Troubleshooting

Common Issues

"jsPDF not found" Error

// Check if jsPDF loaded
if (typeof window.jspdf === 'undefined') {
    console.log('jsPDF not loaded - check your script tags');
}

Empty PDF Generated

// Ensure container has content
const container = document.getElementById('myContent');
if (!container || !container.textContent.trim()) {
    console.log('Container is empty or not found');
}

Mobile Download Issues
- Some mobile browsers may open PDF in new tab instead of downloading
- Use preview mode for mobile: EasyPDF.quickPreview()

Browser Console Debug

// Enable debug mode
const generator = new EasyPDFGenerator({ debug: true });
generator.generatePDF('myContent');

📊 Performance Tips

Optimize Content: Remove unnecessary elements before generation
Chunk Large Documents: Split very large content into multiple PDFs
Lazy Load: Only load jsPDF when needed
Cache: Store generated PDFs in browser storage if needed

🌍 Internationalization

The generator works with all UTF-8 characters:

<div id="multilang">
    <h1>English Title</h1>
    <h2>Título en Español</h2>
    <h3>Titre Français</h3>
    <h4>Deutsche Titel</h4>
    <p>支持中文内容</p>
    <p>يدعم النص العربي</p>
</div>

📄 License

MIT License - Use freely in any project!

Need help? Check the easy-pdf-example.html file for a complete working demo!

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
dist		dist
examples		examples
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
demo.html		demo.html

License

moinulict/easy-html-to-pdf

Folders and files

Latest commit

History

Repository files navigation