1

I have been trying to create Pdf file using ITextSharp. I am able to pass html content via ajax but pdf contains some images which are saved as base64 encoded data in database.

How would i be able to get those data and convert them as an image and insert in my table rows.

I would like to achieve something like this:

<table>
<tr>
<td>{image 1} </td><pre><td>{image 1} </td>
</tr>
</table>

I am able to create the pdf files but instead of image i am getting base64 data

This is my code:

 public ActionResult CreatePdf(string htmlData)
        {
            string mytblhtml = htmlData;
            mytblhtml += GetImage();
           

            string fileName = "MyPdf.pdf";
            using(var ms = new MemoryStream())
            {
                using(var doc = new Document(PageSize.A4, 25, 25, 25, 25))
                {
                    using(var writer = PdfWriter.GetInstance(doc, ms))
                    {
                        doc.Open();

                        using(var srHtml = new StringReader(mytblhtml))
                        {
                            iTextSharp.tool.xml.XMLWorkerHelper.GetInstance().ParseXHtml(writer, doc, srHtml);
                        }
                        doc.Close();
                    }
                }
                // bPDF = ms.ToArray();

                TempData[fileName] = ms;


                return Json(new { success = true, fileName }, JsonRequestBehavior.AllowGet);
            }
        }

        private string GetImage()
        {
            string imgHtml = "<table><tr>";
            using(EmpDb db = new EmpDb())
            {
                var emps = db.Employees.ToList();

                foreach(var e in emps)
                {
                    if(!String.IsNullOrWhiteSpace(e.Image))
                    {
                         imgHtml += $@"<td>data:{e.Image}</td>";
                       
                    }
                }
                imgHtml += "</tr></table>";
                
            }

            return imgHtml;
        }

        public ActionResult DownloadCertPdf(string fileName)
        {
            var ms = TempData[fileName] as MemoryStream;
            if(ms == null)
            {
                return new EmptyResult();
            }
            TempData[fileName] = null;
            return File(ms.ToArray(), "application/pdf", fileName);
        }
istudent
  • 105
  • 1
  • 11
  • Thank you every one for reaching out. I decided to implement different way. instead of trying to parse and read img html tag. created a method that returns the image which i added to the document. public iTextSharp.text.Image ConvertImage(string base64String) { iTextSharp.text.Image png = null; Byte[] bytes = Convert.FromBase64String(base64String); png = iTextSharp.text.Image.GetInstance(bytes); return png; } – istudent Mar 02 '18 at 06:34

2 Answers2

2

There are plenty of other examples of using inline base64 data as images in html Embedding Base64 Images

Two ways to insert images in html is directly with the tag and as a background image in css.

For an image tag you will need to populate src with the metadata for the image and then the base64 string. For css you will need to do something similar. iText should allow the image in the PDF: https://developers.itextpdf.com/fr/content/itext-7-converting-html-pdf-pdfhtml/chapter-7-frequently-asked-questions-about-pdfhtml/can-pdfhtml-render-base64-images-pdf

<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV4AAACWBAMAAABkyf1EAAAAG1BMVEXMzMyWlpbFxcWqqqqcnJyxsbG3t7e+vr6jo6OVuynYAAAACXBIWXMAAA7EAAAOxAGVKw4bAAADG0lEQVR4nO2YzW/aQBDFF2PjHBkwCUfTSOEKUaRecRpFPeKqX0eo1KZHnFx6xFWV/tud2V3DsiJEPdi+vN/BC/aL9mV2PDuLUgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgP/jMkuueYhIWPCn4CZ5+4I2Jj3kIk1OS+tC+1wq1d35LXhcvSTWw7zye0JaF2uZe6TUWeU3lvH8uDg0fkvr95S0LrLk8SqjVIXjH8xGPP2dlkl6VJwbv9kzSx9OS2uiR1uZd6k6VZzWiQR7eUQb/CLjt8qBl6W10aWNrOtWTS7snZI/BDqRfTIyfgP5m9PS2tAZKXMWA3uH+uJkcERL1m/M6fOKtDY6uixxfNd9cyOmGV9zkx0TWflIUkb4c5dpvz06Im2I3oOdOF+YG5FOzmJovyzE9KZSm/oQJUekTXLGE8+3X5NnZRNaTcb6QZBxpZvvDRm/3XFUvl950gaZljxlecfZeSvexUTHhnBNaUD7BDV+zxJ+87iMHUobg3er3+blNyZSx0RIM7dgGb+h3lpuPWmTfq/l5f8wnXMeGxPh7pUaFI4fc7tDozdPNPSkTfrluMqq9/hShdA+LIel8/5XflOdKZ60MTiuC/VJcrEc+UGbkLsf2PrwRel9raX4yqrbGBZjPym5bdvshY433hNbyl8mtyWL5/Ze+oDccuXGkhYt1Qel41r58Ypqj9z+y/Wb9duovx/v5bovX/6mFZLbfx36bWN/W4/kOhn3Pusx0b2a0xTkibNdWL/fV0r3SJ60EUx0iqF5d+TbQdMV0EXpxM/41Q+l52ijP9M+y3OztlJrD5raLs2cdsf61RGVnqOF/rcr6RnRIJZlj+RycGiYUNqt2smd30L+x5wvLZwvYho+XpU8Z5Z8i+cytz6UVR05J0PgnCirHe0+fZIz6oG0IfTZfGyO5rrWuodeHfV8X2BDe74Qtu2cj/U5fiaF1ozmhL+q/M0kJ3YrbuuZKIaetDF+ZuY3mks7uj/arGWxo31Fs36DG3q38aQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4FX+AcL6c1W3I+QxAAAAAElFTkSuQmCC' />

The example code uses PNG but you could decode the data with other mime types such as jpeg.

This site can help you try encoding or decoding images for various mime types. http://freeonlinetools24.com/base64-image

Daniel Gale
  • 643
  • 4
  • 13
0

In a HTML page you can do it inserting something like this in the td tag

<img width="16" height="16" alt="star" src="data:image/png;base64,YOURBASE64CODEDIMAGE" />
jonhid
  • 2,075
  • 1
  • 11
  • 18
  • imgHtml += $@"star";i changed my code but it did not create the image in pdf . – istudent Mar 02 '18 at 05:01
  • @istudent. The format needs to be as per the answer - `src="data:image/png;base64,{e.Image}"` –  Mar 02 '18 at 05:05
  • @istudent Considering e.Image has the base64 text you need to include "data:image/png;base64," before it. Of course if you want jpeg instead of png, you can change that out as well. – Daniel Gale Mar 02 '18 at 05:06
  • For test i change my code like this : imgHtml += $@""; but still it could not display the image. – istudent Mar 02 '18 at 05:59