【问题标题】:How do i insert Base 64 encoded image data as an image in table without saving the image?如何在不保存图像的情况下将 Base 64 编码图像数据作为图像插入表中?
【发布时间】:2018-08-10 07:21:02
【问题描述】:

我一直在尝试使用 ITextSharp 创建 Pdf 文件。我可以通过 ajax 传递 html 内容,但 pdf 包含一些图像,这些图像保存为数据库中的 base64 编码数据。

我将如何获取这些数据并将它们转换为图像并插入到我的表格行中。

我想实现这样的目标:

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

我能够创建 pdf 文件,但我得到的是 base64 数据而不是图像

这是我的代码:

 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);
        }

【问题讨论】:

  • 感谢大家伸出援手。我决定以不同的方式实施。而不是尝试解析和读取 img html 标签。创建了一个返回我添加到文档中的图像的方法。公共 iTextSharp.text.Image ConvertImage(string base64String) { iTextSharp.text.Image png = null;字节[] 字节 = Convert.FromBase64String(base64String); png = iTextSharp.text.Image.GetInstance(bytes);返回.png; }

标签: c# asp.net-mvc itext pdf-generation


【解决方案1】:

在 HTML 页面中,您可以在 td 标记中插入类似这样的内容

<img width="16" height="16" alt="star" src="data:image/png;base64,YOURBASE64CODEDIMAGE" />

【讨论】:

  • imgHtml += $@"";我更改了我的代码,但它没有在 pdf 中创建图像。
  • @学生。格式需要根据答案 - src="data:image/png;base64,{e.Image}"
  • @istudent 考虑到 e.Image 具有 base64 文本,您需要在它之前包含“data:image/png;base64”。当然如果你想要 jpeg 而不是 png,你也可以把它改掉。
  • 对于测试我改变这样的代码:imgHtml + = $ @“";但它仍然无法显示图像。
【解决方案2】:

还有很多其他在 html 中使用内联 base64 数据作为图像的示例 Embedding Base64 Images

在html中插入图片的两种方式是直接使用标签和在css中作为背景图片。

对于图像标签,您需要使用图像的元数据和 base64 字符串填充 src。对于 css,您将需要做类似的事情。 iText 应该允许 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' />

示例代码使用 PNG,但您可以使用其他 mime 类型(例如 jpeg)对数据进行解码。

本网站可以帮助您尝试对各种 mime 类型的图像进行编码或解码。 http://freeonlinetools24.com/base64-image

【讨论】:

    猜你喜欢
    • 2019-01-22
    • 1970-01-01
    • 2019-08-29
    • 2021-05-08
    • 2019-02-16
    • 2012-04-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多