Telerik Blazor PDF Processing - Tutorial on how to add markup (HTML in a string) to a pdf.

1 Answer 719 Views
General Discussions PdfProcessing
James
Top achievements
Rank 2
James asked on 06 Aug 2021, 12:24 PM
Hi there, after many wasted hours of trying to find the right documentation, I am still unable to find where or how one would add markup to a pdf. 

If possible, could you please point me in the right direction, or make a simple tutorial for us? 

I am currently using RadFixedDocument, and have been able to, through a list of data, render those items as text fields on the pdf. 

I am just unable to add a string which contains HTML, and have it render accordingly. 

It just renders as the string it is. 

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 09 Aug 2021, 08:04 AM

Hi James,

There is no easy solution to this. Currently, the PdfProcessing library cannot import HTML. We have a feature request for this on our feedback portal. You can track its progress, subscribe to status changes, and add your comment to it here: PdfProcessing: Add support for browser-like conversion from HTML to PDF.

There are two possible solutions to this. 

The first is to create the entire document with the WordsProcessing library and save it as pdf. I believe that is a better approach since it will convert automatically all elements. Here is an example:

RadFlowDocument document = new RadFlowDocument();
RadFlowDocumentEditor editor = new RadFlowDocumentEditor(document);

editor.InsertText("Some Content");
editor.InsertParagraph();

HtmlFormatProvider provider = new HtmlFormatProvider();
var doc = provider.Import("<p>This is some sample text</p> <h1> And some more</h1>");

editor.InsertDocument(doc);

editor.InsertText("Test");

var pdfProvider = new Telerik.Windows.Documents.Flow.FormatProviders.Pdf.PdfFormatProvider();
File.WriteAllBytes(@"..\..\..\result1.pdf", pdfProvider.Export(document));

The second solution is to import the HTML using the WordsProcessing and manually add the runs to that PDF using the RadFixedDocumentEditor. This is a more complex approach since you need to sync many properties and elements. Here is an example that only shows how to get the runs: 

static void Main(string[] args)
{
    HtmlFormatProvider provider = new HtmlFormatProvider();
    var doc = provider.Import("<p>This is some sample text</p> <h1> And some more</h1>");

    var fixedDocument = new RadFixedDocument();

    var editor = new RadFixedDocumentEditor(fixedDocument);

    editor.InsertRun("Existing content");

    DrawHtml(doc, editor);

    editor.InsertRun("More content");

    editor.Dispose();

    PdfFormatProvider pdfProvider = new PdfFormatProvider();
    File.WriteAllBytes(@"..\..\..\result.pdf", pdfProvider.Export(fixedDocument));

}
static void DrawHtml(RadFlowDocument html, RadFixedDocumentEditor editor)
{
    foreach (var section in html.Sections)
    {
        foreach (var block in section.Blocks)
        {
            if (block is Paragraph)
            {
                var paragraph = (Paragraph)block;

                foreach (var inline in paragraph.Inlines)
                {
                    
                    if (inline is Run)
                    {
                        var run = (Run)inline;
                        editor.CharacterProperties.FontSize = run.FontSize;
                        FontBase font;
                        FontsRepository.TryCreateFont(new Telerik.Documents.Core.Fonts.FontFamily(run.FontFamily.LocalValue.Source), out font);
                        if (font == null)
                        {
                            font = FontsRepository.TimesRoman;
                        }
                        editor.CharacterProperties.Font = font;
                        editor.CharacterProperties.ForegroundColor = new RgbColor(run.ForegroundColor.LocalValue.R, run.ForegroundColor.LocalValue.G, run.ForegroundColor.LocalValue.B);
                        editor.CharacterProperties.HighlightColor = new RgbColor(run.HighlightColor.R, run.HighlightColor.G, run.HighlightColor.B);

                        editor.InsertRun(run.Text);
                    }
                }
            }
        }
    }
}


I hope this helps. Should you have any other questions do not hesitate to ask.

Regards,
Dimitar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions PdfProcessing
Asked by
James
Top achievements
Rank 2
Answers by
Dimitar
Telerik team
Share this question
or