Render HTML in a grid cell

[Chris Adams]

Hi Support,

Trying to render a Grid in a PDF file and one of the cells of the grid should have some HTML in it. The HTML that I receive from the database is in a string format.

Given the limited list of the supported HTML tags in FileFormat PDF, how can I convert the HTML text that I have to something that the tool will not have a problem rendering?

Sample HTML text could be something like this

Some text <a rel='nofollow' href="someurl" target="_blank" title="sometitle">Some A Tag</a>

<table>

<tr>

<td>

first cell

</td>

<td>

second cell

</td>

</tr>

<table>

Some more text <br>

<ul>

<li>

<ul>

<li>something</li>

<li>something else</li>

</ul>

</li>

<li>

something

</li>

</ul>

and this is the code I have for the grid cell

PdfGrid grid = new PdfGrid();

PdfGridRow row = grid.Rows.Add();

row.Cells[1].Value = htmlTextFromDB; <--- THIS IS WHERE I NEED THE HTML TEXT

row.Cells[1].IsHtmlText = true;

Thank you!

[Irfana Jaffer Sadhik]

Syncfusion PDF library provides support to draw Html text in the PDF document. The PdfHTMLTextElement class provides support for a basic set of HTML tags, to render HTML format text in the PDF document.

Follow the below links for more information,

https://help.syncfusion.com/file-formats/pdf/working-with-text#adding-a-html-styled-text

We need to pass the HTML text to this class before setting it to the PDFGrid cell. Please use the below code snippet to draw HTML-styled text in the PDF document:

//Create a new PDF document.

PdfDocument doc = new PdfDocument();

//Add a page to the document.

PdfPage page = doc.Pages.Add();

//Create PDF graphics for the page.

PdfGraphics graphics = page.Graphics;

//Set the font.

PdfFont font = new PdfStandardFont(PdfFontFamily.Courier, 14);

//Simple HTML content

string htmlText = "<font color='#0000F8'>Essential PDF</font> is a <u><i>.NET</i></u> " +

"library with the capability to produce Adobe PDF files ";

//Render HtmlText.

PdfHTMLTextElement richTextElement = new PdfHTMLTextElement(htmlText, font, PdfBrushes.Black);

richTextElement.TextAlign = TextAlign.Left;

//Format Layout.

PdfMetafileLayoutFormat format = new PdfMetafileLayoutFormat();

format.Layout = PdfLayoutType.Paginate;

format.Break = PdfLayoutBreakType.FitPage;

//Draw htmlString.

richTextElement.Draw(page, new RectangleF(0, 20, page.GetClientSize().Width, page.GetClientSize().Height), format);

//Save the document.

doc.Save("Output.pdf");

//Close the document.

doc.Close(true);

Follow the below links for more information,

https://www.syncfusion.com/kb/9829/how-to-draw-html-tags-in-pdf-table-header-using-c-and-vb-net

Try this on your end and let us know the result

[Chris Adams]

Thank you for your answer.

My issue here is that I need to convert any HTML text to a format that would be supported by syncfusion PDF. Is there a way to do that?

[Irfana Jaffer Sadhik]

The HTML to PDF converter is a .NET library for converting webpages, SVG, MHTML, and HTML files to PDF using C#. It uses popular rendering engines such as Blink (Google Chrome) and is reliable and accurate. The result preserves all graphics, images, text, fonts, and the layout of the original HTML document or webpage.

Syncfusion HTML-to-PDF converter will work seamlessly in various platforms like Azure Cloud or web apps, Azure Functions, Amazon Web Service (AWS), Docker, WinForms, WPF, ASP.NET MVC, ASP.NET Core with Windows, Linux, and macOS.

Blink converter internally makes use of chromium executable in headless mode for converting HTML to PDF. It will preserve the PDF document like how the input HTML is displayed in chromium-based web browsers (chrome print preview).

Please refer to the below documentation page to convert HTML to PDF

https://help.syncfusion.com/file-formats/pdf/convert-html-to-pdf/features

Please find the below link for the Gthub Samples:

https://github.com/SyncfusionExamples/html-to-pdf-csharp-examples/tree/master/ASP.NET%20Core

[Chris Adams]

Thank you for your answer, but it still doesn't answer my question. 

I have an HTML string that I need to add to a grid cell. The entire grid is being created manually (not converted from anywhere) and I need to covert JUST the HTML string part (that I get from my database) to a string that would be supported by the file processor. For more details please refer to my original post.

[Irfana Jaffer Sadhik]

As we have already said, we have only supported a basic set of HTML tags, to render HTML format text in the PDF document and we don't have any plan to include more style tags when drawing text using the PdfHTMLTextElement API.

 However, our HTML To PDF library will convert the Html string/file to a PDF document. So as a workaround, we can able to create HTML tables and convert them into PDF using our library and combine the content of the output pdf file into the source PDF document.

Please refer to the below UG documentation for converting the Html string to a PDF document:

https://help.syncfusion.com/file-formats/pdf/convert-html-to-pdf/features#html-string-to-pdf

Please refer to the below UG documentation for overlaying the content to the other PDF document:

https://help.syncfusion.com/file-formats/pdf/working-with-pdf-templates#creating-document-overlays

//Load the PDF document.

FileStream docStream1 = new FileStream(fileName1, FileMode.Open, FileAccess.Read);

PdfLoadedDocument loadedDocument1 = new PdfLoadedDocument(docStream1);

//Load the PDF document.

FileStream docStream2 = new FileStream(fileName2, FileMode.Open, FileAccess.Read);

PdfLoadedDocument loadedDocument2 = new PdfLoadedDocument(docStream2);

//Create the new document.

PdfDocument document = new PdfDocument();

//Add a page to the document.

PdfPage page = document.Pages.Add();

//Create a template from the first document.

PdfPageBase loadedPage = loadedDocument1.Pages[0];

PdfTemplate template = loadedPage.CreateTemplate();

//Draw the loaded template into new document.

page.Graphics.DrawPdfTemplate(template, new PointF(0, 0), new SizeF(500, 700));

//Create a template from the second document.

loadedPage = loadedDocument2.Pages[0];

template = loadedPage.CreateTemplate();

//Draw the loaded template into new document.

page.Graphics.DrawPdfTemplate(template, new PointF(10, 10), new SizeF(400, 500));

//Save the document into stream.

MemoryStream stream = new MemoryStream();

document.Save(stream);

//Set the position as '0'.

stream.Position = 0;

//Closes the document.

document.Close(true);

loadedDocument1.Close(true);

loadedDocument2.Close(true);

//Defining the ContentType for pdf file.

string contentType = "application/pdf";

//Define the file name.

string fileName = "output.pdf";

//Creates a FileContentResult object by using the file contents, content type, and file name.

return File(stream, contentType, fileName);

Try this on your end and let us know the result.