Collapse
Expand
HTML to PDF Converter
Getting Started with HTML to PDF
HTML Content Destination and Scaling in PDF
Convert the Current HTML Page to PDF
Convert a HTML Page to PDF in Same Session
Merge Multiple HTML Pages into a Single PDF
Merge HTML with Existing PDF Documents
Partially Convert of a HTML Page to PDF
Repeat HTML Table Header and Footer in PDF
Headers and Footers
Page Breaks Control
Screen and Print Media Types
Conversion Triggering Modes
Hierachical Bookmarks
Auto Create Hierachical Bookmarks
Select in API the Elements to Bookmark
Select in HTML the Elements to Bookmark
Table of Contents
Live PDF Forms
HTML5 Features
HTTP GET and POST, Proxy Options
HTTP Headers and Cookies
Fonts Embedding
HTML Elements Location in PDF
HTML Elements Visibility in PDF
URI Links in PDF
Internal Links in PDF
File Links and Attachments
Text Notes in PDF
PDF Actions
HTML to PDF Elements
HTML to Image Elements
Images Quality in Generated PDF
Flash and Extensions Support
Watermarks and Stamps
PDF/A and PDF/X Standards
CMYK and GrayScale Color Spaces
PDF Viewer Preferences
PDF Security Features
HTML to Image Converter
PDF Creator
PDF Editor
Live Demo
Description
Sample Code
Select in HTML the Elements to Bookmark
EVO HTML to PDF Converter allows you to define a hierarchy of bookmarks directly in HTML using a set of special attributes. You can set the attribute 'data-bookmark-enabled' on a HTML element to enable the creation a bookmark for that element in PDF. Additionally you can specify the bookmark level in hierarchy with 'data-bookmark-level' attribute and the bookmark title with 'data-bookmark-text' attribute. The Full Description and a Code Sample can be accessed from the top tabs.
Use TCP/IP Server
IP Address:
Port:
Use Web Service
URL:
Service Password:
Convert HTML with Bookmark Attributes
Convert URL or Local File
HTML String with Bookmark Attributes
<!DOCTYPE html> <html> <head> <title>Define Hierarchical Bookmarks in HTML</title> <style type="text/css"> body { font-family: 'Times New Roman'; font-size: 14px; } .level1_bookmark { font-weight: bold; font-size: 24px; } .level2_bookmark { font-weight: bold; font-size: 20px; page-break-before: always; } .level3_bookmark { font-weight: bold; font-size: 16px; } .level4_bookmark { font-weight: bold; font-size: 14px; } </style> </head> <body> <span data-bookmark-enabled="true" data-bookmark-level="1" data-bookmark-text="Part 1 of Bookmarks Hierarchy" class="level1_bookmark">Part 1 of a Hierarchy of Bookmarks Defined in HTML</span><br /> <br /> Any HTML element can be marked to become a bookmark in the generated PDF document using the <b><i>data-bookmark-enabled="true"</i></b> attribute. Additionally you can define the bookmarks level in hierarchy using the <b><i>data-bookmark-level</i></b> attribute and the bookmark title using the <b><i>data-bookmark-text</i></b> attribute.<br /> <br /> <br /> <span style="font-size: 20px; font-weight: bold">Part Chapters:</span><br /> <div style="margin-left: 20px"> <br /> <a href="#part1_chapter1" style="font-size: 16px; font-weight: bold; line-height: 30px">Chapter 1</a><br /> <a href="#part1_chapter2" style="font-size: 16px; font-weight: bold; line-height: 30px">Chapter 2</a><br /> </div> <br /> <br /> <span data-bookmark-enabled="true" data-bookmark-level="2" id="part1_chapter1" class="level2_bookmark">1.1 Chapter 1 of Part 1</span><br /> <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. <br /> <br /> <span data-bookmark-enabled="true" data-bookmark-level="3" class="level3_bookmark">1.1.1 Section 1 of Chapter 1 of Part 1</span><br /> <br /> Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. <br /> <br /> <span data-bookmark-enabled="true" data-bookmark-level="3" class="level3_bookmark">1.1.2 Section 2 of Chapter 1 of Part 1</span><br /> <br /> Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. <br /> <br /> <span data-bookmark-enabled="true" data-bookmark-level="3" class="level3_bookmark">1.1.3 Section 3 of Chapter 1 of Part 1</span><br /> <br /> Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. <br /> <br /> <span data-bookmark-enabled="true" data-bookmark-level="2" id="part1_chapter2" class="level2_bookmark">1.2 Chapter 2 of Part 1</span><br /> <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. <br /> <br /> <span data-bookmark-enabled="true" data-bookmark-level="3" class="level3_bookmark">1.2.1 Section 1 of Chapter 2 of Part 1</span><br /> <br /> Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. <br /> <br /> <span data-bookmark-enabled="true" data-bookmark-level="4" class="level4_bookmark">1.2.1.1 Paragraph 1 of Section 1</span><br /> <br /> Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. <br /> <br /> <span data-bookmark-enabled="true" data-bookmark-level="4" class="level4_bookmark">1.2.1.2 Paragraph 2 of Section 1</span><br /> <br /> Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. <br /> <br /> <span data-bookmark-enabled="true" data-bookmark-level="3" class="level3_bookmark">1.2.2 Section 2 of Chapter 2 of Part 1</span><br /> <br /> Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. <br /> <br /> <!-- Part 2 --> <span data-bookmark-enabled="true" data-bookmark-level="1" data-bookmark-text="Part 2 of Bookmarks Hierarchy" style="page-break-before: always" class="level1_bookmark">Part 2 of a Hierarchy of Bookmarks Defined in HTML</span><br /> <br /> Any HTML element can be marked to become a bookmark in the generated PDF document using the <b><i>data-bookmark-enabled="true"</i></b> attribute. Additionally you can define the bookmarks level in hierarchy using the <b><i>data-bookmark-level</i></b> attribute and the bookmark title using the <b><i>data-bookmark-text</i></b> attribute.<br /> <br /> <br /> <span style="font-size: 20px; font-weight: bold">Chapters:</span><br /> <div style="margin-left: 20px"> <br /> <a href="#part2_chapter1" style="font-size: 16px; font-weight: bold; line-height: 30px">Chapter 1</a><br /> <a href="#part2_chapter2" style="font-size: 16px; font-weight: bold; line-height: 30px">Chapter 2</a><br /> </div> <br /> <br /> <span data-bookmark-enabled="true" data-bookmark-level="2" id="part2_chapter1" class="level2_bookmark">2.1 Chapter 1 of Part 2</span><br /> <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. <br /> <br /> <span data-bookmark-enabled="true" data-bookmark-level="3" class="level3_bookmark">2.1.1 Section 1 of Chapter 1 of Part 2</span><br /> <br /> Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. <br /> <br /> <span data-bookmark-enabled="true" data-bookmark-level="3" class="level3_bookmark">2.1.2 Section 2 of Chapter 1 of Part 2</span><br /> <br /> Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. <br /> <br /> <span data-bookmark-enabled="true" data-bookmark-level="3" class="level3_bookmark">2.1.3 Section 3 of Chapter 1 of Part 2</span><br /> <br /> Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. <br /> <br /> <span data-bookmark-enabled="true" data-bookmark-level="2" id="part2_chapter2" class="level2_bookmark">2.2 Chapter 2 of Part 2</span><br /> <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. <br /> <br /> <span data-bookmark-enabled="true" data-bookmark-level="3" class="level3_bookmark">2.2.1 Section 1 of Chapter 2 of Part 2</span><br /> <br /> Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. <br /> <br /> <span data-bookmark-enabled="true" data-bookmark-level="3" class="level3_bookmark">2.2.2 Section 2 of Chapter 2 of Part 2</span><br /> <br /> Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. </body> </html>
Base URL