HTML to PDF Converter
Getting Started with HTML to PDF
Merge Multiple HTML to PDF
Add HTML Header and Footer with Page Numbers
Add HTML Header and Footer Using Browser Mode
Add Header and Footer to PDF from Multiple HTML
Select HTML Elements to Convert to PDF
Select HTML Elements to Exclude from PDF
Retrieve HTML Element Positions in PDF
Add HTML Stamp to Generated PDF
Repeat HTML Table Header and Footer in PDF
Insert Page Breaks in PDF Using CSS
Avoid Page Break Inside Elements Using CSS
Auto Create Hierachical Bookmarks
Auto Create Table of Contents
Auto Generate Tagged PDF
Convert Internal Links from HTML to PDF
Convert HTML with SVG to PDF
Convert HTML with Web Fonts to PDF
Select Conversion Triggering Mode
Select Media Type for Screen or Print
Convert the Current HTML Page to PDF
Convert a HTML Page to PDF in Same Session
Set PDF Viewer Preferences
Set PDF Permissions and Password
Digitally Sign the Generated PDF
Add HTTP Headers to HTML Page Request
Add Cookies to HTML Page Request
Access HTML Pages with GET and POST
HTML to Image Converter
Convert HTML to a Raster Image
Select HTML Elements to Convert to Image
Select HTML Elements to Exclude from Image
PDF Creator
Create PDF Documents
PDF Editor
Add HTML Stamp to Existing PDF
Word to PDF
Convert Word DOCX to PDF
Retrieve HTML Element Positions in PDF
Use this demo to convert an HTML page to PDF and select the HTML elements for which to retrieve their position in the PDF by entering a CSS selector. You can either provide a page URL or paste HTML code, optionally with a base URL. The selected elements will be highlighted in the PDF using rectangle annotations in different colors, based on the tag type. h1, h2, h3, and h4 tags have special colors assigned, while all other selected tags are highlighted in red by default.
Convert HTML with Base URL
Convert URL or Local File
HTML String to Convert
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Retrive HTML Element Positions Demo</title> <style> body { font-family: Arial, sans-serif; margin: 25px; } .section { margin-bottom: 50px; padding: 20px; border: 1px solid #ccc; } img { width: 100px; margin: 10px; } .highlight { background-color: #f9f9f9; } .note { font-style: italic; color: #666; } </style> </head> <body> <h1>Retrive HTML Element Positions Demo</h1> <p> This is an introductory paragraph with a <span class="highlight">highlighted span</span> and a link to <a href="http://www.evopdf.com">EvoPdf</a>. </p> <div class="section"> <h2>Section Two</h2> <h3>Subsection A</h3> <p> Below is an image wrapped in a link to <a href="http://www.evopdf.com">EvoPdf</a>: </p> <a href="http://www.evopdf.com"> <img src="img/small_logo.png" alt="Linked Image"> </a> <h3>Subsection B</h3> <p> This paragraph contains a <strong>bold tag</strong>, some <code>inline code</code>, and a <a href="http://www.evopdf.com">documentation link</a>. </p> <div style="padding: 10px; background-color: #eee;"> <h4>Nested Heading (h4)</h4> <p>Even deeper nested content with <em>emphasis</em>.</p> </div> </div> <br /><br /> <div class="section"> <h2>Section One</h2> <p>This section contains some text and a basic image element.</p> <img src="img/small_logo.png" alt="Image 1"> <p class="note">Note: This image is not clickable.</p> </div> <div class="section"> <h2>Section Three</h2> <p>This section has another image wrapped in a clickable link.</p> <a href="http://www.evopdf.com"> <img src="img/small_logo.png" alt="Image 3 Linked"> </a> <p>Additional paragraph with a reference to <a href="http://www.evopdf.com">EvoPdf tools</a>.</p> </div> </body> </html>
Base URL
HTML Page to Convert URL
Retrieve HTML Elements Info Options
CSS Selector:
Enable CSS Selector
Create Table of Contents
Delay Conversion :
sec
