HelpBot Assistant

How can I help you?

Lists in JavaScript PDF library

3 Mar 202618 minutes to read

The PDF allows you list the content in ordered and unordered list. The ordered list can be number or alphabets and the unordered list can be bullets, circles, and images.

Adding an ordered list

This example demonstrates how to create an ordered list in a PDF document using the PdfOrderedList class. Ordered lists allow you to present items in a structured, sequential format, typically numbered or lettered, enhancing readability and organization within the PDF content.

import { PdfDocument, PdfPage, PdfListItemCollection, PdfBrush, PdfStringFormat, PdfPen, PdfNumberStyle, PdfOrderedList, PdfListItemCollection, PdfFontFamily, PdfFontStyle, PdfTextAlignment } from '@syncfusion/ej2-pdf';

// Load an existing document
let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Assign the array of string items
let products: string[] = ['Excel', 'Power', 'Point', 'Word', 'PDF'];
// Add the items to list item collection by passing the array of products
let items: PdfListItemCollection = new PdfListItemCollection(products);
// Initialize the instance of ordered list and pass the item collection and optional settings
let list: PdfOrderedList = new PdfOrderedList(items, {
    font: document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular),
    format: new PdfStringFormat(PdfTextAlignment.center),
    pen: new PdfPen({ r: 0, g: 255, b: 0 }, 1),
    brush: new PdfBrush({ r: 0, g: 255, b: 255 }),
    indent: 30,
    textIndent: 50,
    style: PdfNumberStyle.numeric,
    delimiter:  ')'
});
// Draw the ordered list on the page
list.draw(page, { x: 0, y: 20, width: 500, height: 700 });
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Load an existing document
var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Assign the array of string items
var products = ['Excel', 'Power', 'Point', 'Word', 'PDF'];
// Initialize the instance of ordered list and pass the item collection and optional settings
var list: PdfOrderedList = new PdfOrderedList(items, {
    font: document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular),
    format: new ej.pdf.PdfStringFormat(PdfTextAlignment.center),
    pen: new ej.pdf.PdfPen({ r: 0, g: 255, b: 0 }, 1),
    brush: new ej.pdf.PdfBrush({ r: 0, g: 255, b: 255 }),
    indent: 30,
    textIndent: 50,
    style: ej.pdf.PdfNumberStyle.numeric,
    delimiter:  ')'
});
// Draw the ordered list on the page
list.draw(page, { x: 0, y: 20, width: 500, height: 700 });
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Adding an unordered list

This example demonstrates how to create an unordered list in a PDF document using the PdfUnorderedList class. Unordered lists display items with bullet points instead of numbers, making them ideal for presenting non-sequential information in a clear and organized manner.

import { PdfDocument, PdfPage, PdfBrush, PdfStringFormat, PdfFontFamily, PdfUnorderedList, PdfFontStyle, PdfPen, PdfUnorderedListStyle, PdfListItemCollection } from '@syncfusion/ej2-pdf';

// Load the existing document
let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Define the items in the unordered list
let products: string[] = ['Excel', 'Power', 'Point', 'Word', 'PDF'];
// Add the items to list item collection by passing the array of products
let items: PdfListItemCollection = new PdfListItemCollection(products);
// Initialize the instance of the unordered list and pass the list item collection and settings
let list: PdfUnorderedList = new PdfUnorderedList(items, {
    font: document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular),
    format: new PdfStringFormat(PdfTextAlignment.center),
    pen: new PdfPen({ r: 0, g: 255, b: 0 }, 1),
    brush: new PdfBrush({ r: 0, g: 255, b: 255 }),
    indent: 30,
    textIndent: 50,
    style: PdfUnorderedListStyle.disk,
    delimiter:  ')'
});
// Draw the unordered list on the page
list.draw(page, { x: 0, y: 20, width: 500, height: 700 });
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Load the existing document
var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Define the items in the unordered list
var products = ['Excel', 'Power', 'Point', 'Word', 'PDF'];
// Initialize the instance of the unordered list and pass the list item collection and settings
var list = new ej.pdf.PdfUnorderedList(items, {
    font: document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular),
    format: new ej.pdf.PdfStringFormat(PdfTextAlignment.center),
    pen: new ej.pdf.PdfPen({ r: 0, g: 255, b: 0 }, 1),
    brush: new ej.pdf.PdfBrush({ r: 0, g: 255, b: 255 }),
    indent: 30,
    textIndent: 50,
    style: ej.pdf.PdfUnorderedListStyle.disk,
    delimiter:  ')'
});
// Draw the unordered list on the page
list.draw(page, { x: 0, y: 20, width: 500, height: 700 });
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Customize list markers

This example demonstrates how to customize the marker style of an unordered list in a PDF document using the PdfUnorderedList class. The marker defines the symbol that appears before each list item. You can choose from four predefined marker styles: disk, square, asterisk, and circle. These options allow you to visually distinguish different list types or emphasize specific content, enhancing readability and structure within the document.

import { PdfDocument, PdfPage, PdfUnorderedList, PdfUnorderedListStyle, PdfListItemCollection } from '@syncfusion/ej2-pdf';

// Load the existing document
let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Define the items in the unordered list
let products: string[] = ['PDF', 'XlsIO', 'DocIO', 'PPT'];
// Add the items to list item collection by passing the array of products
let items: PdfListItemCollection = new PdfListItemCollection(products);
// Initialize the instance of the unordered list and pass the list item collection and settings
let list: PdfUnorderedList = new PdfUnorderedList(items, {
    style: PdfUnorderedListStyle.disk
});
// Draw the unordered list on the page
list.draw(page, {x: 50, y: 50});
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Load the existing document
var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Define the items in the unordered list
var products = ['PDF', 'XlsIO', 'DocIO', 'PPT'];
// Add the items to list item collection by passing the array of products
var items = new ej.pdf.PdfListItemCollection(products);
// Initialize the instance of the unordered list and pass the list item collection and settings
var list = new ej.pdf.PdfUnorderedList(items, {
    style: ej.pdf.PdfUnorderedListStyle.disk
});
// Draw the unordered list on the page
list.draw(page, {x: 50, y: 50});
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Applying custom fonts to list items

Custom fonts, including Standard, TrueType, and CJK types, can be embedded and applied to list items for consistent multilingual text rendering across platforms.

import { PdfDocument, PdfPage, PdfUnorderedList, PdfListItemCollection, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';

// Load the existing document
let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Define the items in the unordered list
let products: string[] = ['PDF', 'XlsIO', 'DocIO', 'PPT'];
// Add the items to list item collection by passing the array of products
let items: PdfListItemCollection = new PdfListItemCollection(products);
// Initialize the instance of the unordered list and pass the list item collection and settings
let list: PdfUnorderedList = new PdfUnorderedList(items, {
    font: document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular)
});
// Draw the unordered list on the page
list.draw(page, {x: 50, y: 50});
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Load the existing document
var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Define the items in the unordered list
var products = ['PDF', 'XlsIO', 'DocIO', 'PPT'];
// Add the items to list item collection by passing the array of products
var items = new ej.pdf.PdfListItemCollection(products);
// Initialize the instance of the unordered list and pass the list item collection and settings
var list = new ej.pdf.PdfUnorderedList(items, {
    font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 36, ej.pdf.PdfFontStyle.regular)
});
// Draw the unordered list on the page
list.draw(page, {x: 50, y: 50});
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Creating nested list structures

This example demonstrates how to create nested list structures in a PDF document using the PdfUnorderedList and PdfOrderedList classes. Nested lists allow you to organize information hierarchically by placing one list inside another. This is useful when representing multi‑level data, outlining topics with sub points, or grouping related items clearly.

import { PdfDocument, PdfPage, PdfOrderedList, PdfUnorderedList, PdfUnorderedListStyle, PdfListItemCollection } from '@syncfusion/ej2-pdf';

// Load the existing document
let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Initialize the instance of the unordered list and pass the list item collection
let list: PdfUnorderedList = new PdfUnorderedList(new PdfListItemCollection(['PDF', 'XlsIO', 'DocIO', 'PPT']));
// Set the marker style for the unordered list
list.style = PdfUnorderedListStyle.circle;
// Add a nested ordered list to the first list item
list.items.at(0).subList = new PdfOrderedList(new PdfListItemCollection(['JS', 'TS', 'Vue', 'Angular', 'ASP.Net Core']));
// Draw the unordered list on the page
list.draw(page, {x: 50, y: 150});
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Load the existing document
var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Initialize the instance of the unordered list and pass the list item collection
var list = new ej.pdf.PdfUnorderedList(new ej.pdf.PdfListItemCollection(['PDF', 'XlsIO', 'DocIO', 'PPT']));
// Set the marker style for the unordered list
list.style = ej.pdf.PdfUnorderedListStyle.circle;
// Add a nested ordered list to the first list item
list.items.at(0).subList = new ej.pdf.PdfOrderedList(new ej.pdf.PdfListItemCollection(['JS', 'TS', 'Vue', 'Angular', 'ASP.Net Core']));
// Draw the unordered list on the page
list.draw(page, {x: 50, y: 150});
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

List pagination

This example shows how long lists automatically continue onto the next page when drawn using the PdfUnorderedList class. By applying a PdfLayoutFormat, the layout engine handles page breaks smoothly while preserving markers, indentation, and nested levels. This ensures consistent rendering of multi‑page or dynamically generated list content.

import { PdfDocument, PdfPage, PdfList, PdfLayoutFormat, PdfUnorderedList, PdfLayoutBreakType, PdfLayoutType, PdfListItemCollection, PdfLayoutResult } from '@syncfusion/ej2-pdf';

// Load the existing document
let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Create an instance for PDF layout format
let format: PdfLayoutFormat = new PdfLayoutFormat();
// Set the layout format
format.layout = PdfLayoutType.paginate;
format.break = PdfLayoutBreakType.fitElement;
// Initialize the instance of the unordered list and pass the list item collection and settings
let list1: PdfList = new PdfUnorderedList(new PdfListItemCollection(['PDF', 'XlsIO', 'DocIO', 'PPT', 'PDF', 'XlsIO', 'DocIO', 'PPT']));
let list2: PdfList = new PdfUnorderedList(new PdfListItemCollection(['A paragraph is a series of sentences that are organized and coherent, and are all related to a single topic. Almost every piece of writing you do that is longer than a few sentences should be organized into paragraphs.']), {suffix: '_'});
// Draw the unordered list on the page
let result1: PdfLayoutResult = list1.draw(page, {x: 50, y: page.size.height - 100}, format);
let result2: PdfLayoutResult = list2.draw(result1.Page, {x: 50, y: result1.bounds.height + 50}, format);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Load the existing document
var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Create an instance for PDF layout format
var format = new ej.pdf.PdfLayoutFormat();
// Set the layout format
format.layout = ej.pdf.PdfLayoutType.paginate;
format.break = ej.pdf.PdfLayoutBreakType.fitElement;
// Initialize the instance of the unordered list and pass the list item collection and settings
var list1 = new ej.pdf.PdfUnorderedList(new ej.pdf.PdfListItemCollection(['PDF', 'XlsIO', 'DocIO', 'PPT', 'PDF', 'XlsIO', 'DocIO', 'PPT']));
var list2 = new ej.pdf.PdfUnorderedList(new ej.pdf.PdfListItemCollection(['A paragraph is a series of sentences that are organized and coherent, and are all related to a single topic. Almost every piece of writing you do that is longer than a few sentences should be organized into paragraphs.']), {suffix: '_'});
// Draw the unordered list on the page
let result1 = list1.draw(page, {x: 50, y: page.size.height - 100}, format);
let result2 = list2.draw(result1.Page, {x: 50, y: result1.bounds.height + 50}, format);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();