Configuration Guide

This guide covers all available configuration options for the PDF generation functions. EasyPdf is completely free and open source, allowing you to use all features without any restrictions.

Configuration Object Type

typescript

interface PDFConfig {
  // Page Configuration
  pageSize?:
    | "A4"
    | "A3"
    | "LETTER"
    | "LEGAL"
    | { width: number; height: number };
  margins?: {
    top?: number;
    right?: number;
    bottom?: number;
    left?: number;
  };
  filename?: string;

  // Metadata
  metadata?: {
    title?: string;
    author?: string;
    subject?: string;
    keywords?: string[];
    creator?: string;
  };

  // Watermark
  watermark?: {
    text: string;
    fontSize?: number;
    color?: string;
    opacity?: number;
    angle?: number;
  };

  // Export Options
  scale?: number;

  // Enhanced Styling
  styles?: {
    backgroundColor?: string;
    defaultFontSize?: number;
    defaultFontFamily?: string;
    defaultTextColor?: string;
    customCSS?: string;
  };

  // Container Styling
  container?: {
    className?: string;
    style?: React.CSSProperties;
  };

  // Headers and Footers
  header?: {
    text: string | string[];
    fontSize?: number;
    fontColor?: string;
    marginTop?: number;
    marginBottom?: number;
    marginLeft?: number;
    marginRight?: number;
    align?: "left" | "center" | "right";
  };

  footer?: {
    text: string | string[];
    fontSize?: number;
    fontColor?: string;
    marginTop?: number;
    marginBottom?: number;
    marginLeft?: number;
    marginRight?: number;
    align?: "left" | "center" | "right";
  };
}

Configuration

EasyPdf provides extensive configuration options to customize your PDF generation. All features are available for free.

Basic Configuration

tsx

const config = {
  pageSize: "A4",
  margins: {
    top: 30,
    right: 20,
    bottom: 20,
    left: 20,
  },
  filename: "document.pdf",
};

Configuration Options

Page Configuration

Option	Type	Default	Description
`pageSize`	`"A4" \| "A3" \| "LETTER" \| "LEGAL" \| { width: number, height: number }`	`"A4"`	The size of the PDF pages
`margins`	`{ top?: number; right?: number; bottom?: number; left?: number }`	`{ top: 30, right: 20, bottom: 20, left: 20 }`	Page margins in pixels
`filename`	`string`	`"document.pdf"`	The name of the generated PDF file

Metadata

tsx

const config = {
  metadata: {
    title: "Generated Document",
    author: "EasyPdf",
    subject: "PDF Document",
    keywords: ["pdf", "react"],
    creator: "EasyPdf",
  },
};

Option	Type	Default	Description
`metadata.title`	`string`	`"Generated Document"`	The title of the PDF document
`metadata.author`	`string`	`"EasyPdf"`	The author of the PDF document
`metadata.subject`	`string`	`undefined`	The subject of the PDF document
`metadata.keywords`	`string[]`	`undefined`	Keywords associated with the PDF
`metadata.creator`	`string`	`"EasyPdf"`	The creator of the PDF document

Styling

tsx

const config = {
  styles: {
    backgroundColor: "#ffffff",
    defaultFontSize: 12,
    defaultFontFamily: "Arial, sans-serif",
    defaultTextColor: "#333333",
    customCSS: "",
  },
};

Option	Type	Default	Description
`styles.backgroundColor`	`string`	`"#ffffff"`	Background color of the PDF
`styles.defaultFontSize`	`number`	`12`	Default font size in pixels
`styles.defaultFontFamily`	`string`	`"Arial, sans-serif"`	Default font family
`styles.defaultTextColor`	`string`	`"#333333"`	Default text color
`styles.customCSS`	`string`	`""`	Custom CSS to be applied to the PDF content

Headers and Footers

tsx

const config = {
  header: {
    text: "Document Header",
    fontSize: 12,
    fontColor: "#000000",
    marginTop: 10,
    marginLeft: 20,
    marginRight: 20,
    align: "center",
  },
  footer: {
    text: "Page {pageNumber} of {totalPages}",
    fontSize: 12,
    fontColor: "#000000",
    marginBottom: 10,
    marginLeft: 20,
    marginRight: 20,
    align: "center",
  },
};

Header Options

Option	Type	Default	Description
`header.text`	`string \| string[]`	`"Easy PDF Header"`	Header text. Supports page variables
`header.fontSize`	`number`	`12`	Font size of the header
`header.fontColor`	`string`	`undefined`	Color of the header text
`header.marginTop`	`number`	`10`	Top margin for the header
`header.marginLeft`	`number`	`20`	Left margin for the header
`header.marginRight`	`number`	`20`	Right margin for the header
`header.align`	`"left" \| "center" \| "right"`	`"center"`	Alignment of the header text

Option	Type	Default	Description
`footer.text`	`string \| string[]`	`"Page {pageNumber} of {totalPages}"`	Footer text. Supports page variables
`footer.fontSize`	`number`	`12`	Font size of the footer
`footer.fontColor`	`string`	`undefined`	Color of the footer text
`footer.marginBottom`	`number`	`10`	Bottom margin for the footer
`footer.marginLeft`	`number`	`20`	Left margin for the footer
`footer.marginRight`	`number`	`20`	Right margin for the footer
`footer.align`	`"left" \| "center" \| "right"`	`"center"`	Alignment of the footer text

Watermark

tsx

const config = {
  watermark: {
    text: "CONFIDENTIAL",
    fontSize: 60,
    color: "#888888",
    opacity: 0.2,
    angle: -45,
  },
};

Option	Type	Default	Description
`watermark.text`	`string`	`"Easy PDF Watermark"`	The watermark text
`watermark.fontSize`	`number`	`undefined`	Font size of the watermark
`watermark.color`	`string`	`undefined`	Color of the watermark
`watermark.opacity`	`number`	`0.3`	Opacity of the watermark (0-1)
`watermark.angle`	`number`	`-45`	Rotation angle of the watermark

Container Options

The container option allows you to control the styling of the container element that wraps your PDF content:

typescript

container?: {
  className?: string;    // Additional CSS classes to apply
  style?: React.CSSProperties;  // Direct CSS styles as a React style object
}

The style property accepts standard CSS properties in camelCase format (React style object). This is useful for controlling the layout and appearance of your PDF content. For example:

typescript

const config = {
  container: {
    style: {
      width: "800px",
      margin: "0 auto",
      padding: "20px",
      backgroundColor: "#ffffff",
      fontFamily: "Arial, sans-serif",
    },
  },
};

Note: By default, the container adapts to the page size. Use the style property to set a fixed width or other specific styling needs.

Export Options

Option	Type	Default	Description
`scale`	`number`	`2`	Scale factor for PDF generation. Higher values result in better quality but larger file size

Page Variables

Headers and footers support the following variables in their text:

{pageNumber}: Current page number
{totalPages}: Total number of pages

Example:

tsx

const config = {
  footer: {
    text: "Page {pageNumber} of {totalPages}",
  },
};

Complete Configuration Example

tsx

const config: PDFConfig = {
  pageSize: "A4",
  margins: {
    top: 50,
    right: 30,
    bottom: 40,
    left: 30,
  },
  watermark: {
    text: "CONFIDENTIAL",
    fontSize: 60,
    color: "#FF0000",
    opacity: 0.2,
    angle: -45,
  },
  metadata: {
    title: "Important Document",
    author: "Your Company",
    subject: "Confidential Report",
    keywords: ["confidential", "report"],
    creator: "EasyPdf Generator",
  },
  header: {
    text: "CONFIDENTIAL DOCUMENT",
    fontSize: 14,
    fontColor: "#FF0000",
    marginTop: 20,
    align: "center",
  },
  footer: {
    text: "Page {pageNumber} of {totalPages}",
    fontSize: 10,
    marginBottom: 15,
    align: "center",
  },
  styles: {
    backgroundColor: "#ffffff",
    defaultFontSize: 12,
    defaultFontFamily: "Arial, sans-serif",
    defaultTextColor: "#333333",
    customCSS: "",
  },
  container: {
    style: {
      width: "800px",
      margin: "0 auto",
      minHeight: "1000px",
      boxSizing: "border-box",
    },
  },
  scale: 2,
};

Best Practices

Page Size and Margins
- Choose appropriate page size for your content
- Use consistent margins across documents
- Consider content width when setting margins
Container Styling
- Use fixed widths for consistent layouts
- Consider responsive design needs
- Test with different page sizes
Watermarks
- Use appropriate opacity (0.1-0.3 recommended)
- Choose contrasting colors
- Test visibility with different content
Styling
- Use consistent fonts and colors
- Test with different content types
- Consider print-friendly colors
Performance
- Optimize images before including
- Use appropriate scale factor (default: 2)
- Test with representative content volume

Configuration Guide ​

Configuration Object Type ​

Configuration ​

Basic Configuration ​

Configuration Options ​

Page Configuration ​

Metadata ​

Styling ​

Headers and Footers ​

Header Options ​

Footer Options ​

Watermark ​

Container Options ​

Export Options ​

Page Variables ​

Complete Configuration Example ​

Best Practices ​

Related ​

Configuration Guide

Configuration Object Type

Configuration

Basic Configuration

Configuration Options

Page Configuration

Metadata

Styling

Headers and Footers

Header Options

Footer Options

Watermark

Container Options

Export Options

Page Variables

Complete Configuration Example

Best Practices

Related