How to render HTML to XPS document

In this article we’ll go through how we can generate XPS documents using Aspose.HTML library. It should be noted that the rendering to XPS file format in many aspects repeats the rendering to PDF.

First, we need to make basic steps to make application for examples: create a Console Application project, add Aspose.HTML library, declare field of HTMLDocument type, generate (or load) HTML content.

private static HTMLDocument _document;
static void Main()
{
    _document = new HTMLDocument();
    GenerateSampleHtml5Document();
    // TODO: Render XPS
}    

Below is the code of GenerateSampleHtml5Document method, but it will not be discussed in this article:

    private static void GenerateSampleHtml5Document()
    {
        _document.InsertBefore(_document.CreateDocumentType("html", "", "", ""), _document.DocumentElement);
        _document.DocumentElement.SetAttribute("lang", "en");
        _document.Title = "Page for XPS rendering demo";

        var head = _document.GetElementsByTagName("head")[0];
        var metaCharSet = (HTMLMetaElement)_document.CreateElement("meta");
        metaCharSet.SetAttribute("charset", "UTF-8");

        var metaViewPort = (HTMLMetaElement)_document.CreateElement("meta");
        metaViewPort.Name = "viewport";
        metaViewPort.Content = "width=device-width, initial-scale=1";

        var linkElement1 = (HTMLLinkElement)_document.CreateElement("link");
        linkElement1.Href = "http://cdn.myunv.com/css/uecore.css";
        linkElement1.Rel = "stylesheet";

        var linkElement2 = (HTMLLinkElement)_document.CreateElement("link");
        linkElement2.Href = "https://fonts.googleapis.com/css?family=Germania+One";
        linkElement2.Rel = "stylesheet";

        var style = (HTMLStyleElement)_document.CreateElement("style");            
        style.TextContent = "h1 {color: red;} " +
                            "h2 {color:green} " +
                            "table { border: 1px dashed black}" +
                            "p {font-family: 'Germania One', cursive;}" +
                            "#coverPage {page-break-after: always; }";

        head.AppendChild(metaCharSet);
        head.AppendChild(metaViewPort);
        head.AppendChild(linkElement1);
        head.AppendChild(linkElement2);
        head.AppendChild(style);

        var coverPageElement = _document.CreateElement("div");
        coverPageElement.InnerHTML = "<div id=\"coverPage\"><h1>Cover Page</h1></div>";

        var header1 = (HTMLHeadingElement)_document.CreateElement("h1");
        header1.TextContent = "Heading 1";
        var header2 = (HTMLHeadingElement)_document.CreateElement("h2");
        header2.TextContent = "Heading 2";

        _document.DocumentElement.LastElementChild.AppendChild(coverPageElement);
        _document.DocumentElement.LastElementChild.AppendChild(header1);
        _document.DocumentElement.LastElementChild.AppendChild(header2);

        var colors = new[] { "red", "orange", "black", "green", "blue", "indigo", "violet" };
        var alignment = new[] { "left", "right", "center" };
        for (var i = 0; i < 10; i++)
        {
            var paragraph = (HTMLParagraphElement)_document.CreateElement("p");
            paragraph.Id = $"par{i}";
            paragraph.Style.SetProperty("font-weight", i % 2 == 0 ? "700" : "400", "");
            paragraph.Style.SetProperty("color", colors[i % 7], "");
            paragraph.Style.SetProperty("text-align", alignment[i % 3], "");
            paragraph.TextContent = LoremNET.Lorem.Paragraph(10, 5);
            _document.DocumentElement.LastElementChild.AppendChild(paragraph);
        }

        var img = (HTMLImageElement)_document.CreateElement("img");
        img.Src = "http://lorempixel.com/400/200/sports/1";
        img.Alt = "Placeholder 400x200";
        img.Title = "Placeholder image";
        _document.DocumentElement.LastElementChild.AppendChild(img);
        //Adding an ordered list
        var orderedListElement = (HTMLOListElement) _document.CreateElement("ol");
        for (var i = 0; i < 10; i++)
        {
            HTMLLIElement listItem = (HTMLLIElement) _document.CreateElement("li");
            listItem.TextContent = $"Item {i + 1}";
            orderedListElement.AppendChild(listItem);
        }
        _document.DocumentElement.LastElementChild.AppendChild(orderedListElement);

        // Adding simple table 4x3 
        var table = (HTMLTableElement) _document.CreateElement("table");
        var tBody = (HTMLTableSectionElement) _document.CreateElement("tbody");
        for (var i = 0; i < 4; i++)
        {
            var row = (HTMLTableRowElement) _document.CreateElement("tr");
            row.Id = "trow_" + i;
            for (var j = 0; j < 3; j++)
            {
                var cell = (HTMLTableCellElement) _document.CreateElement("td") ;
                cell.Id = $"cell{i}_{j}";
                cell.TextContent = "Cell " + j;
                row.AppendChild(cell);
            }
            tBody.AppendChild(row);
        }
        table.AppendChild(tBody);
        _document.DocumentElement.LastElementChild.AppendChild(table);        
    }

Rendering with default settings

Let's try to render XPS document with default rendering options and file to store output. In this example we use following classes:

So, to render XPS document we need to create instances of XPSRenderingOptions, XPSDevice and HtmlRenderer and run the rendering process by calling Render method of HtmlRenderer object.

    private static void RenderSimpleXPS()
    {
        var options = new XPSRenderingOptions();

        Console.WriteLine(options.PageSetup.AnyPage.Margin.Top.IsAuto);
        Console.WriteLine(options.PageSetup.AnyPage.Margin.Bottom.IsAuto);
        Console.WriteLine(options.PageSetup.AnyPage.Margin.Left.IsAuto);
        Console.WriteLine(options.PageSetup.AnyPage.Margin.Right.IsAuto);
        Console.WriteLine(options.PageSetup.AnyPage.Size.Width);
        Console.WriteLine(options.PageSetup.AnyPage.Size.Height);

        const string outputfile = @"C:\aspose\XPS\output01.xps";            
        Console.WriteLine("Render XPS file started...");
        var device = new XPSDevice(options, outputfile);
        var renderer = new HtmlRenderer();
        renderer.Render(device, _document);
        Console.WriteLine("Render XPS file finished.");
    }          

The first six calls of Console.WriteLine shows that we use "default" values for all (any) pages in target document.

We’ve generated a very simple XPS to demostrate rendering concept: create the device, create the render and then run one. In reality we’ll often have requirements about paper size, page orientation, margins, etc. Unlike the PDF, the Aspose.HTML library currently supports only page settings for XPS files.

Advanced Usage

Next example shows advanced usage of XPSRenderingOptions. For example, we need to get the document with paper size A4 and margins: top - 20mm, bottom - 15mm, left/right - 15mm. These settings will be applied for any page.

In order to setup page settings and margins for any pages, we'll use PageSetup.AnyPage property. This is property is the instance of Page class. To define the page layout we need to set up Size and Margin. In both cases we'll use Unit class to get appropiate measurement units.

Following example shows how to set up page settings to any page:

private static void RenderAdvancedXPS()
{
    var width = Unit.FromMillimeters(210);
    var height = Unit.FromMillimeters(297);
    var pageSizeA4 = new Size(width, height);
    var margins = new Margin(
        Unit.FromMillimeters(15), // left
        Unit.FromMillimeters(10), // top
        Unit.FromMillimeters(15), // right
        Unit.FromMillimeters(20));// bottom
    var options = new XPSRenderingOptions { PageSetup = { AnyPage = new Page(pageSizeA4, margins) } };
    const string outputfile = @"C:\aspose\XPS\output02.xps";
    Console.WriteLine("Render XPS file started...");
    var device = new XPSDevice(options, outputfile);
    var renderer = new HtmlRenderer();
    renderer.Render(device, _document);
    Console.WriteLine("Render XPS file finished.");
}
    

The XPSRenderingOptions also offers the feature to set mirror pages and their rendering. When using this approach, we need to specify the Page settings for both Left and Right pages. Note, that values are set simultaneously for the left and right pages by calling SetLeftRightPage method.

private static void RenderMirrorPages()
{            
    var marginsLeft = new Margin(
        Unit.FromMillimeters(30), // left
        Unit.FromMillimeters(10), // top
        Unit.FromMillimeters(15), // right
        Unit.FromMillimeters(20));// bottom
    var marginsRight = new Margin(
        Unit.FromMillimeters(15), // left
        Unit.FromMillimeters(10), // top
        Unit.FromMillimeters(30), // right
        Unit.FromMillimeters(20));// bottom

    var options = new XPSRenderingOptions();
    options.PageSetup.SetLeftRightPage(
        new Page(PageSizeA4, marginsLeft),
        new Page(PageSizeA4, marginsRight));

    const string outputfile = @"C:\aspose\XPS\output03.xps";
    Console.WriteLine("Render XPS file started...");
    var device = new XPSDevice(options, outputfile);
    var renderer = new HtmlRenderer();
    renderer.Render(device, _document);
    Console.WriteLine("Render XPS file finished.");
}

Setting the Cover Page

The last feature of XPSRenderingOptions, described in this article, is the FirstPage property. This property is used to set the cover page configuration. The values of this property are set similarly to AnyPage. To set the page break we used a CSS rule "#coverPage {page-break-after: always; }".

private static void RenderWithCoverPage()
{
    Console.WriteLine(_document.DocumentElement.InnerHTML);
    var margin = new Margin(Unit.FromMillimeters(30)); //all margins set to 30 mm
    var options = new XPSRenderingOptions();
    options.PageSetup.FirstPage=new Page(PageSizeA4, margin);
    const string outputfile = @"C:\aspose\XPS\output04.XPS";
    Console.WriteLine("Render XPS file started...");
    var device = new XPSDevice(options, outputfile);
    var renderer = new HtmlRenderer();
    renderer.Render(device, _document);
    Console.WriteLine("Render XPS file finished.");
}    

Conclusion

In this article we discussed how to convert HTML to XPS. It’s really difficult to explain all of the features provided by a Aspose.HTML library in one article this, so be sure to check out the documentation as well to learn about other features like adjact to widest page, encryption, using custom fonts, etc.