Add HTML to Image Elements to a PDF Document

EVO PDF Client for .NET Core

EVO HTML to PDF Converter allows you to convert a HTML page to an image in a PDF document by adding a EvoPdfClientHtmlToImageElement object at a given location in the PDF document. You can add multiple HTML to Image Elements in the same PDF document

The most important options controlling the HTML to Image conversion using a HtmlToImageElement are enumerated below, grouped in a few categories.

HTML Viewer Options

HTML Viewer Width. This option is the equivalent in converter of the browser window width and represents the preferred width in which to render the HTML content. The property you can set in your code to control the browser window width is HtmlToImageElementHtmlViewerWidth. When the browser window width is changed the HTML content displayed inside the window can have a different layout and something similar happens when you change the HTML Viewer width of the converter. The actual HTML content width can be larger in case the HTML page cannot be entirely displayed in the given viewer width. The HTML content can be further scaled to fit the PDF page based on the converter scaling options set in your application. The HTML content size is expressed in pixels and the PDF page size is in expressed in points, 1 point being 1/72 inches. The converter is using a 96 DPI resolution to transform pixels to points with the following formula: Points = Pixels/96 * 72
HTML Viewer Height. This option is the equivalent in converter of the browser window height and can be used to limit the conversion to the top part of the HTML page. If this property is not set the entire page will be converted. The property you can set in your code to control the browser window height is HtmlToImageElementHtmlViewerHeight
Clip HTML Content Width. You can set this option to force the HTML content width to be exactly HtmlViewerWidth pixels. If this option is false then actual HTML content width can be larger than HtmlViewerWidth pixels in case the HTML page cannot be entirely displayed in the given viewer width. By default this option is false and the HTML content is not clipped. The property you can set in your code for this option is HtmlToImageElementClipHtmlView

HTML Content Options

HTML Content Destination in PDF. The HTML content destination is given by the X and Y coordinates where to start rendering in first PDF page and by the destination rectangle width and height. All the values are expressed in points. 1 point is 1/72 inches. If you don't set any destination rectangle then by default the converter will start rendering in the top left corner of the first page, will try to use the entire PDF page width for rendering and will auto determine the destination rectangle height such that the entire HTML content is visible. The properties you can set in your code to control the HTML content destination in PDF are HtmlToImageElementX, HtmlToImageElementY, HtmlToImageElementWidth and HtmlToImageElementHeight. These values can also be set when the HtmlToImageElement object is created.

Code Sample - Add HTML to Image Elements to a PDF Document

Copy

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

// Use EVO PDF Namespace
using EvoPdfClient;

namespace EvoHtmlToPdfDemo.Controllers
{
    public class Add_HTML_to_Image_Elements_to_PDFController : Controller
    {
        // GET: Add_HTML_to_Image_Elements_to_PDF
        public ActionResult Index()
        {
            return View();
        }

        [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 a PDF document
            Document pdfDocument = null;
            if (useTcpService)
                pdfDocument = new Document(serverIP, serverPort);
            else
                pdfDocument = new Document(true, webServiceUrl);

            // Set optional service password
            if (useServicePassword)
                pdfDocument.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
            pdfDocument.LicenseKey = "4W9+bn19bn5ue2B+bn1/YH98YHd3d3c=";

            // Create a PDF page where to add the first HTML
            PdfPage firstPdfPage = pdfDocument.AddPage();

            // The image location in PDF
            float xLocation = float.Parse(collection["xLocationTextBox"]);
            float yLocation = float.Parse(collection["yLocationTextBox"]);

            // The URL of the HTML page to convert to an image in PDF
            string urlToConvert = collection["urlTextBox"];

            // Create the HTML to Image element
            HtmlToImageElement htmlToImageElement = new HtmlToImageElement(xLocation, yLocation, urlToConvert);

            // Optionally set the HTML viewer width
            htmlToImageElement.HtmlViewerWidth = int.Parse(collection["htmlViewerWidthTextBox"]);

            // Optionally set the HTML viewer height
            if (collection["htmlViewerHeightTextBox"][0].Length > 0)
                htmlToImageElement.HtmlViewerHeight = int.Parse(collection["htmlViewerHeightTextBox"]);

            // Optionally set the HTML content clipping option to force the HTML content width to be exactly HtmlViewerWidth pixels
            htmlToImageElement.ClipHtmlView = collection["clipContentCheckBox"].Count > 0;

            // Optionally set the destination width in PDF
            if (collection["contentWidthTextBox"][0].Length > 0)
                htmlToImageElement.Width = float.Parse(collection["contentWidthTextBox"]);

            // Optionally set the destination height in PDF
            if (collection["contentHeightTextBox"][0].Length > 0)
                htmlToImageElement.Height = float.Parse(collection["contentHeightTextBox"]);

            // Optionally set a delay before conversion to allow asynchonous scripts to finish
            htmlToImageElement.ConversionDelay = 2;

            // Add the HTML to Image element to PDF document
            // The AddElementResult contains the bounds of the HTML to Image Element in last rendered PDF page
            // such that you can start a new PDF element right under it
            firstPdfPage.AddElement(htmlToImageElement);

            // 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 = "Add_HTML_to_Image_Elements_to_PDF.pdf";

            return fileResult;
        }
    }
}