Get HTML Elements Position and Bounds in PDF

There are many situations when it is necessary to find out details about the HTML elements laid out in PDF. For example, it is interesting to know the bounds in the PDF document where a HTML element was laid out. Having this information it is possible to replace the automatically laid out PDF content with a different content or it is possible to manually create outlines and links to the position where a HTML element was laid out.

Besides finding the bounds in PDF document where a HTML document was laid out it is also possible to get the HTML element ID, HTML code, CSS class, the tag and the text.

In order to select the HTML elements for which to retrieve information after conversion you have to set the HtmlToPdfSelectedHtmlElements property with a list of CSS selectors. The information about the selected elements will be returned in the SelectedHtmlElementsInfo property of the HiQPdfClientHtmlConversionInfo class. A reference to an object of the HtmlConversionInfo is given by the HtmlToPdfConversionInfo property after conversion.

HTML Elements Info Demo

In this demo you can learn how to hide a HTML image from the generated PDF document and how to place a different image in the same position. By default the CSS selector selects all the images from the HTML document for replacement. You can modify the CSS selector to select an image with a given ID using a selector like #ImageID. A similar approach can be used for example to replace the HTML form elements with PDF form elements in the generated PDF document in order to create interractive PDF forms.

Demo Source Code

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Hosting;

using HiQPdfClient;

namespace HiQPdf_Demo.Controllers
{
    public class HtmlElementsPositionInPdfController : Controller
    {
        IWebHostEnvironment m_hostingEnvironment;
        public HtmlElementsPositionInPdfController(IWebHostEnvironment hostingEnvironment)
        {
            m_hostingEnvironment = hostingEnvironment;
        }

        // GET: HtmlElementsPositionInPdf
        public ActionResult Index()
        {
            SetCrtPageUri();

            return View();
        }

        [HttpPost]
        public ActionResult ConvertToPdf(IFormCollection collection)
        {
            string serverIP = collection["textBoxServerIP"];
            uint serverPort = uint.Parse(collection["textBoxServerPort"]);
            string serverPassword = collection["textBoxServerPassword"];

            HtmlToPdf htmlToPdfConverter = new HtmlToPdf(serverIP, serverPort);

            // use server password if necessary
            if (serverPassword.Length > 0)
                htmlToPdfConverter.ServerPassword = serverPassword;

            // set a demo serial number
            htmlToPdfConverter.SerialNumber = "YCgJMTAE-BiwJAhIB-EhlWTlBA-UEBRQFBA-U1FOUVJO-WVlZWQ==";

            htmlToPdfConverter.SelectedHtmlElements = new string[] { collection["textBoxImageSelector"] };
            htmlToPdfConverter.HiddenHtmlElements = new string[] { collection["textBoxImageSelector"] };

            PdfDocument document = null;
            try
            {
                document = htmlToPdfConverter.ConvertUrlToPdfDocument(collection["textBoxUrl"]);

                for (int i = 0; i < htmlToPdfConverter.ConversionInfo.SelectedHtmlElementsInfo.Count; i++)
                {
                    HtmlElementInfo htmlImageInfo = htmlToPdfConverter.ConversionInfo.SelectedHtmlElementsInfo[i];

                    PdfPageRegion imagePdfRegion = htmlImageInfo.PdfRegions[0];
                    PdfPage imagePdfPage = document.Pages[imagePdfRegion.PageIndex];

                    // create the image element
                    PdfImage pdfImage = new PdfImage(imagePdfRegion.Rectangle, m_hostingEnvironment.WebRootPath + "/DemoFiles/Images/HiQPdfLogo_Modified.png");
                    pdfImage.ClipRectangle = imagePdfRegion.Rectangle;

                    imagePdfPage.Layout(pdfImage);
                }

                // write the PDF document to a memory buffer
                byte[] pdfBuffer = document.WriteToMemory();

                FileResult fileResult = new FileContentResult(pdfBuffer, "application/pdf");
                fileResult.FileDownloadName = "ReplaceHtmlElements.pdf";

                return fileResult;

            }
            finally
            {
                if (document != null)
                    document.Close();
            }
        }

        private void SetCrtPageUri()
        {
            HttpRequest httpRequest = this.ControllerContext.HttpContext.Request;
            UriBuilder uriBuilder = new UriBuilder();
            uriBuilder.Scheme = httpRequest.Scheme;
            uriBuilder.Host = httpRequest.Host.Host;
            if (httpRequest.Host.Port != null)
                uriBuilder.Port = (int)httpRequest.Host.Port;
            uriBuilder.Path = httpRequest.PathBase.ToString() + httpRequest.Path.ToString();
            uriBuilder.Query = httpRequest.QueryString.ToString();

            ViewData["CrtPageUri"] = uriBuilder.Uri.AbsoluteUri;
        }
    }
}

See Also