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
Add HTML in Header and Footer
Add Page Numbering in HTML
Add Header and Footer in External PDFs
Merge Multiple HTMLs into a Single PDF
Page Breaks Control
Insert Page Breaks in PDF Using CSS
Avoid Page Break Inside Elements Using CSS
Insert Page Breaks in PDF Using API
Avoid Page Break Inside Elements Using API
Avoid Page Breaks Inside Images Using API
Screen and Print Media Types
Use Different Styles for Screen and Print
Conversion Triggering Modes
Select Conversion Triggering Mode
Hierachical Bookmarks
Auto Create Hierachical Bookmarks
Select in API the Elements to Bookmark
Select in HTML the Elements to Bookmark
Table of Contents
Auto Create a Table of Contents
Define in HTML the Table of Contents Items
Table of Contents for Multiple HTMLs
Insert PDF Before Table of Contents
Live PDF Forms
Auto Create a Fillable PDF Form
Define in HTML the PDF Form Fields
HTML5 Features
Convert HTML with SVG to PDF
Convert HTML with Web Fonts to PDF
HTTP GET and POST, Proxy Options
Access HTML Pages with GET and POST
Access HTML Pages Through a Proxy
HTTP Headers and Cookies
Add HTTP Headers to HTML Page Request
Add Cookies to HTML Page Request
Fonts Embedding
Embed Fonts in PDF Document
Embed Web Fonts in PDF Document
HTML Elements Location in PDF
Select in API the HTML Elements to Retrieve
Select in HTML the Elements to Retrieve
HTML Elements Visibility in PDF
Use API to Select HTML Elements to Hide
Define in HTML the Elements to Hide
URI Links in PDF
Convert URI Links from HTML to PDF
Define Custom URI Links in HTML
Internal Links in PDF
Convert Internal Links from HTML to PDF
Define Custom Internal Links in HTML
File Links and Attachments
Create File Links and Attachments in PDF
Text Notes in PDF
Create Text Notes in Generated PDF
PDF Actions
Execute JavaScript when Document is Opened
Go To a Page when Document is Opened
Execute JavaScript when a Button is Clicked
HTML to PDF Elements
Add HTML to PDF Elements to PDF
HTML to Image Elements
Add HTML to Image Elements to PDF
Images Quality in Generated PDF
Set Scaling and JPEG Compression Level
Replace Images with Higher Quality Images
Flash and Extensions Support
Convert HTML with Flash to PDF
Watermarks and Stamps
Add Watermarks and Stamps in PDF
PDF/A and PDF/X Standards
Create PDF/A and PDF/X Documents
CMYK and GrayScale Color Spaces
Create CMYK and GrayScale PDF Documents
PDF Viewer Preferences
Set Layout, Mode, Menus and Toolbars
Set Initial Zoom Level
PDF Security Features
Set PDF Permissions and Password
Digitally Sign the Generated PDF
HTML to Image Converter
Convert HTML to a Raster Image
Convert HTML to SVG Vector Image
PDF Creator
Create PDF Documents
HTML to PDF Elements
HTML to Image Elements
Text Elements
Graphic Elements
Image Elements
Headers and Footers
Add HTML in Header and Footer
Add Page Numbering in HTML
Add Header and Footer in External PDFs
Bookmarks
PDF Forms
URI Links
Internal Links
File Attachments
Text Notes
PDF Actions
Execute JavaScript when Document is Opened
Go To a Page when Document is Opened
Execute JavaScript when a Button is Clicked
Viewer Preferences
Set Layout, Mode, Menus and Toolbars
Set Initial Zoom Level
PDF Security
Set PDF Permissions and Password
Digitally Sign a PDF Document
PDF Editor
Merge PDF Documents
Stamp PDF Documents
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