EVO PDF Logo

Select in HTML the Elements for Which to Retrieve Information

EVO PDF Client for .NET Core

EVO HTML to PDF Converter allows you to retrieve detailed information about any element of the HTML page. You can get the element tag name, CSS class name, ID, HTML code of the element and attributes. You can select the elements for which to retrieve the information by adding the data-mapping-enabled attribute to element directly in HTML page. Additionally you can set a unique ID for an element with data-mapping-id to help you find the element in the collection of retrieved elements.

Code Sample - Select in HTML the Elements for Which to Retrieve Information

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

using System.Text;

// Use EVO PDF Namespace
using EvoPdfClient;

namespace EvoHtmlToPdfDemo.Controllers.HTML_to_PDF.HTML_Elements_Location
{
    public class Select_in_HTML_Elements_to_RetrieveController : Controller
    {
        [HttpPost]
        public ActionResult ConvertHtmlToPdf(IFormCollection collection)
        {
            // Get the server options
            string serverIP = collection["textBoxServerIP"];
            uint serverPort = uint.Parse(collection["textBoxServerPort"]);
            string servicePassword = collection["textBoxServicePassword"];
            bool useServicePassword = servicePassword.Length > 0;
            bool useTcpService = collection["ServerType"] == "radioButtonUseTcpService";
            string webServiceUrl = collection["textBoxWebServiceUrl"];

            // Create the HTML to PDF converter object
            HtmlToPdfConverter htmlToPdfConverter = null;
            if (useTcpService)
                htmlToPdfConverter = new HtmlToPdfConverter(serverIP, serverPort);
            else
                htmlToPdfConverter = new HtmlToPdfConverter(true, webServiceUrl);

            // Set optional service password
            if (useServicePassword)
                htmlToPdfConverter.ServicePassword = servicePassword;

            // Set license key received after purchase to use the converter in licensed mode
            // Leave it not set to use the converter in demo mode
            htmlToPdfConverter.LicenseKey = "4W9+bn19bn5ue2B+bn1/YH98YHd3d3c=";

            // Set an adddional delay in seconds to wait for JavaScript or AJAX calls after page load completed
            // Set this property to 0 if you don't need to wait for such asynchcronous operations to finish
            htmlToPdfConverter.ConversionDelay = 2;

            Document pdfDocument = null;

            // Convert HTML page or string with mapping attributes to a PDF document object 
            // The document can be further modified to highlight the selected elements
            if (collection["HtmlPageSource"] == "convertHtmlRadioButton")
            {
                string htmlWithMappingAttributes = collection["htmlStringTextBox"];
                string baseUrl = collection["baseUrlTextBox"];

                // Convert a HTML string with mapping attributes to a PDF document object
                pdfDocument = htmlToPdfConverter.ConvertHtmlToPdfDocumentObject(htmlWithMappingAttributes, baseUrl);
            }
            else
            {
                string url = collection["urlTextBox"];

                // Convert a HTML page with mapping attributes to a PDF document object
                pdfDocument = htmlToPdfConverter.ConvertUrlToPdfDocumentObject(url);
            }

            // Display detailed information about the selected elements
            StringBuilder htmlElementInfoBuilder = new StringBuilder();
            for (int mappingIndex = 0; mappingIndex < htmlToPdfConverter.HtmlElementsMappingOptions.HtmlElementsMappingResult.Count; mappingIndex++)
            {
                HtmlElementMapping htmlElementInfo = htmlToPdfConverter.HtmlElementsMappingOptions.HtmlElementsMappingResult.GetByIndex(mappingIndex);

                // Get other information about HTML element
                string htmlElementTagName = htmlElementInfo.HtmlElementTagName;
                string htmlElementID = htmlElementInfo.HtmlElementId;
                string htmlElementMappingID = htmlElementInfo.MappingId;
                string htmlElementCssClasssName = htmlElementInfo.HtmlElementCssClassName;
                string htmlElementHtmlCode = htmlElementInfo.HtmlElementOuterHtml;
                string htmlElementInnerHtml = htmlElementInfo.HtmlElementInnerHtml;
                string htmlElementText = htmlElementInfo.HtmlElementText;
                NameValuePairsCollection htmlElementAttributes = htmlElementInfo.HtmlElementAttributes;
                PdfRectangle[] htmlElementRectanglesInPdf = htmlElementInfo.PdfRectangles;

                htmlElementInfoBuilder.AppendFormat("<br/>---------------------------------------- HTML Element Info ----------------------------------------<br/><br/>");
                htmlElementInfoBuilder.AppendFormat("<b>Tag Name:</b> {0}<br/>", htmlElementTagName);
                htmlElementInfoBuilder.AppendFormat("<b>Element ID:</b> {0}<br/>", htmlElementID);
                htmlElementInfoBuilder.AppendFormat("<b>Mapping ID:</b> {0}<br/>", htmlElementMappingID);
                htmlElementInfoBuilder.AppendFormat("<b>Text:</b> {0}<br/>", htmlElementText);

                htmlElementInfoBuilder.AppendFormat("<b>Attributes:</b><br/>");
                for (int i = 0; i < htmlElementAttributes.Count; i++)
                {
                    NameValuePair nameValuePair = htmlElementAttributes.GetByIndex(i);
                    htmlElementInfoBuilder.AppendFormat("&nbsp;&nbsp;&nbsp;{0} = \"{1}\"<br/>", nameValuePair.Name, nameValuePair.Value);
                }


                htmlElementInfoBuilder.AppendFormat("<b>Location in PDF:</b><br/>");
                for (int i = 0; i < htmlElementRectanglesInPdf.Length; i++)
                {
                    PdfPage pdfPage = pdfDocument.GetPage(htmlElementRectanglesInPdf[i].PageIndex);
                    int pdfPageIndex = htmlElementRectanglesInPdf[i].PageIndex;
                    RectangleFloat rectangleInPdfPage = htmlElementRectanglesInPdf[i].Rectangle;

                    htmlElementInfoBuilder.AppendFormat("&nbsp;&nbsp;&nbsp;PDF Page Index: {0}<br>", pdfPageIndex);
                    htmlElementInfoBuilder.AppendFormat("&nbsp;&nbsp;&nbsp;Rectangle: X = {0:N2} pt , Y = {1:N2} pt , W = {2:N2} pt , H = {3:N2} pt<br/>",
                            rectangleInPdfPage.X, rectangleInPdfPage.Y, rectangleInPdfPage.Width, rectangleInPdfPage.Height);
                }

                htmlElementInfoBuilder.AppendFormat("<br/>");
            }

            PdfPage lastPdfPage = pdfDocument.GetPage(htmlToPdfConverter.ConversionSummary.LastPageIndex);
            RectangleFloat lastPageRectangle = htmlToPdfConverter.ConversionSummary.LastPageRectangle;

            HtmlToPdfElement htmlElementInfoHtml = new HtmlToPdfElement(0, lastPageRectangle.Y + lastPageRectangle.Height + 1, htmlElementInfoBuilder.ToString(), null);
            lastPdfPage.AddElement(htmlElementInfoHtml);

            // Save the PDF document in a memory buffer
            byte[] outPdfBuffer = pdfDocument.Save();

            // Send the PDF file to browser
            FileResult fileResult = new FileContentResult(outPdfBuffer, "application/pdf");
            fileResult.FileDownloadName = "Select_in_HTML_Elements_to_Retrieve.pdf";

            return fileResult;
        }
    }
}
HTML Code with Mapping Attributes

XML
<!DOCTYPE html>
<html>
<head>
    <title>Select in HTML the Elements for Which to Retrieve Information</title>
</head>
<body style="font-family: 'Times New Roman'; font-size: 14px">
    <span style="font-size: 24px; font-weight: bold; color: navy">Select the HTML Elements Using 'Data-Mapping-Enabled' Attribute</span><br />
    <br />
    <span style="font-size: 14px; color: black">Detailed information about the following elements will be retrieved and displayed right in the generated PDF:
    </span>
    <br />
    <br />
    <!-- HTML elements for which to retrieve detailed information -->
    <img data-mapping-enabled="true" data-mapping-id="logo_image" alt="Logo Image" style="width: 350px" src="img/logo.jpg" id="imageHtmlID" />
    <br />
    <br />
    <a data-mapping-enabled="true" data-mapping-id="link_to_website" style="font-size: 18px; font-weight: bold; color: navy" href="http://www.evopdf.com" id="linkHtmlID">Visit EVO HTML to PDF Converter Website</a>
</body>
</html>