Click here to Skip to main content
14,971,029 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have generated a PDF using the HTMLWorker of iTextsharp. In PDF I want to show text on image marking specific area. For that, I have used div tag with the position but it not showing text on the image, but if I run the same HTML in the browser then it shows text on an image on specific location.

Is there anything which I missing in my code? Or is there another way to show text on the image using iTextsharp?

iTextsharp: Version

Below is the HTML which work correctly in browser:
<table style="table-layout:fixed" width="100%" style="font-family:Verdana;font-size:8px;">
        <td align="left"><img src="http://localhost/TheAutoAuction/img/image1.jpg" width="520"></img></td>
<div id="divArea1" style="position:absolute;left:50px;top:250px;;font-weight:bold;">Area1</div>

Current Output Preview:[^]

What I have tried:

StringBuilder sReportHeader = new StringBuilder();

sReportHeader.Append("<table style=\"table-layout:fixed\" width=\"100%\" style=\"font-family:Verdana;font-size:8px;\">" +
                        "<tr>" +
                            "<td align=\"left\">" + @"<img src=\"http://localhost/img/image1.jpg\" width=\"520\"></img></td>" +
                        "</tr>" +
                    "</table>" +
                    "<div id=\"divArea1\" style=\"position:absolute;left:50px;top:250px;font-weight:bold;\">Area1</div>");

MemoryStream workStream = new MemoryStream();
Document document = new Document();
var worker = new HTMLWorker(document);
var pdfWriter = PdfWriter.GetInstance(document, workStream);
pdfWriter.CloseStream = false;
TwoColumnHeaderFooter twopdf = new TwoColumnHeaderFooter();
pdfWriter.PageEvent = twopdf;
twopdf.OnOpenDocument(pdfWriter, document);
worker.Parse(new StringReader(sReportHeader.ToString()));

byte[] byteInfo = workStream.ToArray();
workStream.Write(byteInfo, 0, byteInfo.Length);
workStream.Position = 0;

return new FileStreamResult(workStream, "application/pdf");
Updated 7-Mar-19 1:57am

1 solution

Two of the most important rules to remember in designing a web page are:

1. Know you user agent, it's capabilities, and it's quirks. Not all browsers and other rendering applications will render HTML the same way, and they don't all support all available HTML/XHTML versions. 20 years ago when everyone was pushing Netscape there were things that IE got right but Navigator boinked.

2. Use valid markup When the HTML/XHTML is invalid, you don't know how what the effect will be when it is rendered; this is called quirks mode. And with respect to Rule #1, the different user-agents will render the same error differently. Just about every browser since Firefox 3.x will improperly close broken HTML comment tags.

As for your problem, it could be a combination of the 2 above rules; as your img element will be invalid:
"<td align=\"left\">" + @"<img src=\"http://localhost/img/image1.jpg\" width=\"520\"></img></td>"
should become
<td align="left"><img src=\"http://localhost/img/image1.jpg\" width=\"520\"></img></td>
Which is incorrect, it is an empty element meaning there is no closing tag and it has some slashes in it which don't belong.
Try using this
@"<td align=""left""><img src=""http://localhost/img/image1.jpg"" width=""520"" /></td>"
Notice the coloring doesn't change in the C# blocks as I wrapped the entire line with @, got rid of the slashes, and< made all of the double-quotes into 2-double-quotes.

What you can do if fixing your html to be 100% perfect is to experiment. Try making the image you want in the table be the background for the table or cell you want it is. Or try something else.

You may also want to try looking into iTextPDF and it's HTML capabilities/quirks:
Book page : Does my HTML have to be valid XML?[^]
Rajesh Pandya 7-Mar-19 23:33pm
@MadMyche Thank you for the detailed answer. I will make sure HTML is correct. Thank you for your help.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900