HTML to PDF Conversion CSS styles and Table of Contents internal links not working

[Usha]

We have a requirement to convert a HTML document to PDF. When we try to import the HTML using HtmlFormatProvider the CSS styles are not imported and we also loose the table of contents hyperlink in the document. In turn the PDF which is exported does not seem to have the styles applied. Please could you provide your suggestion on how to achieve HTML to PDF conversion along with CSS styles.

[Peshito]

Hi Usha,

Do you lose all the styles or some of them? RadWordsProcessing library used document model similar to OOXML model used in MS Word, which is designed to handle rich text and is not fully compatible with HTML (not all HTML constructs can be presented in the document model, and vice versa). We have a list of supported HTML elements that you could refer to - Supported HTML Elements. This is why some of the elements are not properly imported. In order to properly identify what elements are the reason for this issue, I would ask you to provide the document you have used. As this is a forum thread you could either submit a support thread or upload the document to a file sharing third party web site.

Regards,
Peshito
Progress Telerik

[Usha]

Hi Peshito,

Thanks for your reply. We managed to fix the CSS by applying styles with respect to the supported elements. Table of contents still is not working and we are not able to create it. for eg we created the html like below for internal reference - table for contents and its not working.

<a href="#1563">

<h3 id="1563">

please could you suggest us alternate approach to fix this scenario.

 

 

[Peshito]

Hi Usha,

I am glad you managed to fix the CSS issues. As for the table of contents, PDF export of hyperlinks pointing to bookmarks is currently not supported in RadWordsProcessing. We have this logged as a feature request in our feedback portal: Add support for exporting hyperlinks to PDF which are pointing to bookmarks where you could vote for and subscribe to be notified for any status updates.

As a possible workaround, you could first export the document using RadWordsProcessing, and then use RadPdfProcessing in order to add a page with link annotations pointing to destinations in the PDF document. To achieve the desired result, you can iterate the first page content to identify the text elements which will be used as indexes. After this, you can measure the size of the text of each element with the help of Block element and use this size to create link annotation positioned over the text element. The destination of the link annotation will be pointing to the desired page in the PDF document:

 

PdfFormatProvider provider = new PdfFormatProvider();
RadFixedDocument document = provider.Import(File.OpenRead(fileName));

RadFixedPage firstPage = document.Pages[0];
RadFixedPage destinationPage = document.Pages[1];

foreach (var element in firstPage.Content)
{
    TextFragment textFragment = element as TextFragment;

    if (textFragment != null && textFragment.Text.Contains("Performance Score Table"))
    {
        Location location = new Location
        {
            Page = destinationPage
        };

        Block textBlock = new Block();
        textBlock.TextProperties.FontSize = textFragment.FontSize;
        textBlock.TextProperties.Font = textFragment.Font;
        textBlock.InsertText(textFragment.Text);

        Size textSize = textBlock.Measure(firstPage.Size);
        Link link = new Link(location);
        link.Rect = new Rect(textFragment.Position.Matrix.OffsetX, textFragment.Position.Matrix.OffsetY - textSize.Height, textSize.Width, textSize.Height);
        firstPage.Annotations.Add(link);
    }
}

using (Stream output = File.Open(fileName, FileMode.CreateNew))
{
    provider.Export(document, output);
}

You could also set custom fill color (e.g. almost black color (0, 0, 1)) of the text elements used as indexes to distinguish them from the rest of the page.

I hope this helps.

Regards,
Peshito
Progress Telerik