Capacitor PDF Generator

This Capacitor plugin enables you to easily generate PDF documents from HTML content directly within your mobile app. Designed for both Android and iOS platforms, it seamlessly converts your HTML strings or files into high-quality PDF files that can be saved, shared, or printed.

Installation

npm install capacitor-pdf-generator
npx cap sync

Usage

The generate method takes an options object with the following properties:

• html: The HTML template to use.
• data: The data to render in the template.
• direction: The direction of the text (ltr or rtl).
• locale: The locale to use for the text.
• logo: The URL of the logo to use in the header.
• headerLine1: The first line of the header.
• headerLine2: The second line of the header.
• footerLine1: The first line of the footer.
• footerLine2: The second line of the footer.
• filename: The name of the generated PDF file.
• margin: The margin of the PDF file.

Example

import { Plugins } from '@capacitor/core';
const { PdfGenerator } = Plugins;

async function generatePdf() {
  const html = `
   USE HTML template with CSS. Attached DEMO file name dynamic-template.html
  `;

  const requestData = [
  { subHead: 'Invoice Number', subValue: 'INV-2025-00123' },
  { subHead: 'Invoice Date', subValue: '2025-08-11' },
  { subHead: 'Due Date', subValue: '2025-09-10' },
  { subHead: 'Bill To', subValue: 'John Doe' },
  { subHead: 'Billing Address', subValue: '1234 Elm Street, Springfield, IL' },
  { subHead: 'Shipping Address', subValue: '5678 Oak Avenue, Springfield, IL' },
  { subHead: 'Item Description', subValue: 'Laptop Model XYZ' },
  { subHead: 'Quantity', subValue: '2' },
  { subHead: 'Unit Price', subValue: '$1200.00' },
  { subHead: 'Subtotal', subValue: '$2400.00' },
  { subHead: 'Tax (10%)', subValue: '$240.00' },
  { subHead: 'Total Amount', subValue: '$2640.00' },
  { subHead: 'Payment Terms', subValue: 'Net 30 days' },
  { subHead: 'Notes', subValue: 'Thank you for your business!' },
]

 const options = {
    html: template,
    data: {
      logo: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2", 
      headerLine1: 'Your Company Name',
      headerLine2: 'Invoice',
      footerLine1: 'Thank you for your business!',
      footerLine2: 'www.yourcompany.com',
      title: 'Demo',
      items: requestData,
      isRtl: false // Set to true for Arabic, Hebrew.
    },
    locale: 'ar-SA', // Example for Arabic
    margin:10
  };

 PdfGenerator.generate(options).then(result => {
    console.log('PDF generated', result.base64);
      // Do something with the base64 string
  });

}

API

generate(...)

generate(options: PdfGeneratorOptions) => Promise<{ base64: string; }>

| Param | Type | | ------------- | --------------------------------------------------------------------- | | options | PdfGeneratorOptions |

Returns: Promise<{ base64: string; }>

Interfaces

PdfGeneratorOptions

| Prop | Type | Description | | ----------------- | --------------------------------- | ----------------------------------------- | | html | string | The HTML template to use. | | data | any | The data to render in the template. | | direction | 'ltr' | 'rtl' | The direction of the text (ltr or rtl). | | locale | string | The locale to use for the text. | | logo | string | The URL of the logo to use in the header. | | headerLine1 | string | The first line of the header. | | headerLine2 | string | The second line of the header. | | footerLine1 | string | The first line of the footer. | | footerLine2 | string | The second line of the footer. | | filename | string | The name of the generated PDF file. | | margin | number | The margin of the PDF file. |