Welcome to HiQPdf Demo
HTML to PDF
HTML to PDF Converter Demo
Merge Multiple HTML to PDF
Add HTML in PDF Header and Footer
Add Header and Footer using Browser
Add Header and Footer on Merged PDF
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
Control PDF Page Breaks with CSS
Auto Create Outlines and Links
Auto Create Table of Contents
Auto Create Tagged PDF
Set Conversion Triggering Mode
Select Media Type for Rendering
Web Fonts Advanced Support
Convert Current View with Form Data
Convert Another View with Form Data
PDF Viewer Settings
PDF Security Settings
PDF Digital Signatures
Set HTTP Headers Demo
Set HTTP Cookies Demo
GET and POST Requests Demo
HTML to Image
Convert HTML to 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.hiqpdf.com">HiQPdf</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.hiqpdf.com">HiQPdf</a>: </p> <a href="http://www.hiqpdf.com"> <img src="Images/HiQPdfLogo.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.hiqpdf.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="Images/HiQPdfLogo.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.hiqpdf.com"> <img src="Images/HiQPdfLogo.png" alt="Image 3 Linked"> </a> <p>Additional paragraph with a reference to <a href="http://www.hiqpdf.com">HiQPdf 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
Wait Before Convert :
sec
