Auto Create Table of Contents

EVO HTML to PDF Converter can be configured to automatically generate a table of contents in the PDF document based on the H1 to H6 header tags in the HTML document. In addition, any HTML element can be marked as a table of contents entry using the data-heading attribute when the custom table of contents mode is used. The table style, individual entry level styles and page number styles can be customized using a standard CSS stylesheet. There is an option to create the table of contents inline, embedded anywhere within the converted HTML document content.

Convert URL or Local File

Convert HTML String

HTML Page URL or Local File to Convert

HTML String to Convert

<!DOCTYPE html>
<html>
<head>
    <title>Auto Create Table of Contents</title>
    <link href="styles/webfonts.css" type="text/css" rel="stylesheet">
</head>
<body style="font-family: Verdana, sans-serif; font-size: 16px">
    <br />
    <br />
    <h1>Contents</h1>
    <a href="#Chapter1">Go To Chapter 1</a>
    <br />
    <a href="#Chapter2">Go To Chapter 2</a>
    <br />
    <a href="#Chapter3">Go To Chapter 3</a>
    <br />
    <a href="#CustomTocItems">Go To Custom TOC Items</a>
    <br />
    
    <div id="html-to-pdf-toc"></div>
    <h2 style="page-break-before: always" id="Chapter1">Chapter 1</h2>
    This is the chapter 1 content.
    <h2 style="page-break-before: always" id="Chapter2">Chapter 2</h2>
    This is the chapter 2 content.
    <h2 style="page-break-before: always" id="Chapter3">Chapter 3</h2>
    This is the chapter 3 content.

    
    <h2 style="page-break-before: always" id="CustomTocItems">Custom Table of Contents Example</h2>
    These table of contents entries are created from ordinary elements using the data-heading attribute.
    <div data-heading="3">Custom TOC Item - Level 3</div>
    This entry was added to the table of contents using a custom &lt;div&gt; element with data-heading="3".
    <div data-heading="3" data-heading-text="Custom TOC Item With Explicit Title">This visible text is ignored for the table of contents</div>
    This entry uses data-heading-text to set the table of contents title independently of the element text.
    <h3 data-heading="false">Excluded Heading (data-heading="false")</h3>
    This is a real H3 heading, but it is excluded from the table of contents because of data-heading="false".

    <p><i>Note: The custom data-heading attribute is enabled only when the custom table of contents mode is used.</i></p>
</body>
</html>

Base URL

Table of Contents Options

Create Table of Contents

Create Inline

Use Browser Mode

Show Page Numbers

Count TOC Pages

Page Numbers Offset:

Title:

Table of Contents Style

#html-to-pdf-toc {
    font-family: Arial, sans-serif;
    margin: 0px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    width: 100%;
    position: relative;
    display : block;
    z-index: 100;
    opacity: 1;

    /* uncomment the lines below to force PDF page breaks before and after inline TOC */
    /*page-break-after : always;
    page-break-before : always;*/

    /* uncomment the line below for RTL table of contents*/
    /*direction : rtl;*/
}

/* TOC title style */
#html-to-pdf-toc .toc-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #444444;
    text-align: center;
}

/* Common style for all TOC entries text */
#html-to-pdf-toc li .toc-link {
    order: 1;
    text-decoration: none;
    color: inherit;
    padding: 0px;
    margin: 0px;
}

/* Level specific style for TOC entries text */

#html-to-pdf-toc li .toc-link-level-1 {
    font-weight: bold;
    font-size: 18px;
    color: #111111;
}

#html-to-pdf-toc li .toc-link-level-2 {
    font-weight: bold;
    font-size: 16px;
    color: #222222;
}

#html-to-pdf-toc li .toc-link-level-3 {
    font-weight: bold;
    font-size: 14px;
    color: #333333;
}

#html-to-pdf-toc li .toc-link-level-4 {
    font-weight: normal;
    font-size: 12px;
    color: #333333;
}

#html-to-pdf-toc li .toc-link-level-5 {
    font-weight: normal;
    font-size: 11px;
    color: #333333;
    font-style: italic;
}

#html-to-pdf-toc li .toc-link-level-6 {
    font-weight: normal;
    font-size: 10px;
    color: #333333;
    font-style: italic;
}

/* Common style for all page numbers */
#html-to-pdf-toc li .page-link {
    order: 3;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    padding: 0px;
    margin: 0px;
    color: #111111;
}

/* Style for space between entry text and page number */ 
#html-to-pdf-toc li::after {
    flex-grow: 1;
    order: 2;
    content: "";
    height: 1em;
    /* comment the line below to remove the dotted line from TOC */
    border-bottom: 2px dotted lightgray;
}

#html-to-pdf-toc ul {
    list-style-type: none; 
    padding: 0px;
}

/* Common style for all TOC entries*/
#html-to-pdf-toc li {
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 0px;
    margin: 0px;
}

/* Level specific style for TOC entries */

#html-to-pdf-toc ul li.level-1 {    
    margin-bottom: 10px;
    margin-inline-start: 0px;    
}

#html-to-pdf-toc ul li.level-2 {
    margin-bottom: 8px;
    margin-inline-start: 20px;
}

#html-to-pdf-toc ul li.level-3 {
    margin-bottom: 6px;
    margin-inline-start: 40px;
}

#html-to-pdf-toc ul li.level-4 {
    margin-bottom: 4px;
    margin-inline-start: 60px;
}

#html-to-pdf-toc ul li.level-5 {
    margin-bottom: 2px;
    margin-inline-start: 80px;
}

#html-to-pdf-toc ul li.level-6 {
    margin-bottom: 2px;
    margin-inline-start: 100px;
}

HTML Viewer Options

Width:

Height:

Zoom:

PDF Page Options

Size:

Auto Width

Orientation:

Margins:

Left:

Right:

Top:

Bottom:

Navigation Options

Timeout:

sec

Delay Conversion :

sec