How to Generate PDF Documents

You can generate PDF files.

PDF Settings

Unit: Possible values are: pt, mm, cm, inch. A point equals 1/72 of inch, or about 0.35 mm (an inch being 2.54 cm). Default value is mm.

Size: The size used for generating PDF pages. Default value is A4. If you select custom, then enter the width and the height as comma separated values (expressed in the unit selected).

Orientation: Select the orientation of page - Portrait or Landscape.

Side Margin: It defines the left and right margin of the PDF page.

Top Margin: It defines the top margin of the PDF page.

Text Color: It defines the color used for text. 

Primary Font: Choose the font used in the PDF documents.

Primary and Secondary Color: You can add colors that can be used to style the PDF document.

Meta Information: You can set the file name, title and author of the PDF document.

Title Settings

These settings apply to the title of the PDF document.

Show Title: Enable or disable the display of title.

Title Class: Here, you can enter the style class that will be applied to the title.

Title Style: here, you can enter the CSS style.

Header Settings

The header is applied to all the pages of the PDF document. The header can contain the logo or image and HTML content. 

Logo: Choose the logo image.

Logo Align: Select the alignment of logo - Left, Center or Right.

Logo Width: Set the width of the logo image.

Content: Add HTML content here.

Header Gap: This is the space added after the header. You an use this setting to avoid any overlapping between header and main content.

Footer Settings

Similar to the header, the footer is also applied to all the pages of the PDF document. You an add HTML content to the footer.

Content: Add HTML content here to be added to the footer.

You can use special tags to add current page {page} and total number of pages {nb}. For example: Page {page} of {nb}.

PDF Content using HTML

Tags

You can generate PDF content directly from HTML. Following HTML tags are supported:

  • strong, b, u, i, em
  • a, img
  • p, div, span, h1, h2, h3, h4, h5, h6, blockquote
  • br, hr
  • table, tr, td, th
  • ul, ol, li

Other tags will automatically be removed.

Attributes

To apply styling to the PDF documents, you can add "class" and "style" attributes. For some special uses, data-* attributes are also used.

Basic Styling

Tags "strong" and "b" will be Bold. Tag "u" will be underline. Tags "i" and "em" will be Italics.

Spacing or Line Break

Tag "br" will add some spacing between the elements. You can use it multiple times to increase spacing.

Horizontal Line

Tag "hr" will add or draw a horizontal line.

Headings (h1 to h6)

Heading tags will display in larger font size than base font size.

Lists

The "ul" tag will display list with bullets and "ol" tag will display numbered list.

Tables

The "table" tag will start the table. The "tr" tag will add a new row. The tags "td" and "th" will create a column. The "th" tag will have bold text.

By default, the width of all columns is same. To change the widths of columns, add data-col-widths attribute to the table tag. For example: <table data-col-widths="30,30,60"> for three column table.

Images

The "img" tag is used to display images in PDF document. Supported attributes: src, width, height.

Links

The "a" tag is used to create links in the PDF document. Supported attributes: href.

Paragraph

The "p" tag adds some empty space below. Use "div" tag for no spacing after the text.

Class Attribute

Following classes are supported:

  • Alignment: text-center, text-end, text-start
  • Text Color: text-primary, text-secondary, text-success, text-danger, text-light, text-white
  • Background Color: bg-primary, bg-secondary, bg-light, bg-dark
  • Border: border
  • Font Type: font-primary, font-secondary
  • Font Size: fs-1, fs-2, fs-3
  • Font Weight: fw-bold

Style Attribute

Following styles are supported:

  1. text-align (left, center, right)
  2. color (Example: #000000)
  3. background-color (Example: #FFFFFF)
  4. font-size
  5. font-weight (If attribute is present, it will make text bold)
  6. border (if attribute is present, it will add border)

Colors

There are three types of colors:

  1. Text Color
  2. Fill Color or Background Color
  3. Draw Color for Lines and Shapes