Export Base64 Image to Excel.

Hii all,

I am trying to export base 64 age image to excel, but it is giving me a cross signed image instead of the original image.

you can see my code below.

<html>
<head>
head>
<body>
<table id="table" border="1" class="pvtTable" data-numrows="6" data-numcols="10">
<tbody>
<tr>
<th colspan="1" rowspan="1">th>
<th class="pvtAxisLabel">Product Nameth>
<th class="pvtColLabel" colspan="1" rowspan="2">610164th>
<th class="pvtColLabel" colspan="1" rowspan="2">110152909th>
<th class="pvtColLabel" colspan="1" rowspan="2">B1th>
<th class="pvtColLabel" colspan="1" rowspan="2">Derivedth>
<th class="pvtTotalLabel" rowspan="2">Countth>
tr>
<tr>
<th class="pvtAxisLabel">Thumbnail12Prodth>
<th>th>
tr>
<tr>
<th class="pvtRowLabel" rowspan="1" colspan="2"><a href="#"><img src="data:image/png;base64,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">a> th>
<td class="pvtVal row0 col4" data-value="1">1td>
<td class="pvtVal row0 col7" data-value=" ">td>
<td class="pvtVal row0 col8" data-value=" ">td>
<td class="pvtVal row0 col9" data-value=" ">td>
<td class="pvtTotal rowTotal" data-value="1" data-for="row0">1td>
tr>
<tr>
<th class="pvtRowLabel" rowspan="1" colspan="2"><a href="#"><img id ="imgElem" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAp1JREFUeNqEU21IU1EYfu7unW5Ty6aBszYs6MeUjGVYokHYyH5E1B9rZWFEFPQnAwmy6Hc/oqhfJsRKSSZGH1JIIX3MNCsqLTD9o1Oj6ebnnDfvvefezrnbdCHhCw/n433P8z7nPe/hBEEAtX0U7hc164uwuvVSXKwZLoOmaRDim+7m9vZa0WiEKSUFFpNpCWlmMyypqTDRuYn6t3k8vmQ2gRDCxs0t9fW45F52aBTROJLtZl7nEZad2m+KtoQCQ0FBARyOCGRZ/q92I1WgqqXlfdd95VsrK8/pChIEqqpCkiQsiCII0aBQZZoWl8lzFDwsFjMl0DBLY8Lj41hBwK4jSQrWOIphL6xYyhwJDWGo6wFSaH1Y3PTCAsITE1oyAa8flhWkbSiCLX8vun11eiGIpiJ/z2nYdx5HqLdVV7elrOzsuqysL3rmBIGiKPizKCHHWY4PLVeQbnXAdegqdhy+hu8dDTBnbqQJZJ1A7u+vz7RaiymWCZgCRSF6Edk8b9cx+B/W6WuVxPaZnyiqXoPpyUmVYvkKTIFClHigEieKjYuSvETUllaF4GAUM1NT6ooaJDKx+aDfC9fByxj90REb+9ppmIoAscH/6leg8MS9DJXPAM9xHCM443K57C6biMjcHDaVVCHw9RmCA2/RGC5C00AqXk/m4p20HZK4CM/J3Zk9n0ecMBhDQnJHcrTisyMfdQXOilrdMfxcwoHq/fg5R59TiQV3hYGKo6X2J/c7LyQIjOx9GXhOw/zoJ8wEevRGyp53o/lGMNYsBgPtEwLecwov7/jGDKa1twT6o3KpL4MdZgGsWZLtfPr7f1q58k1JNHy7YYaM+J+K3Y2PmAIbRavX66229hrGVvvL5uzsHDEUvUu+NT1my78CDAAMK1a8/QaZCgAAAABJRU5ErkJggg==" alt="Red dot" />a> th>
<td class="pvtVal row1 col4" data-value=" ">td>
<td class="pvtVal row1 col5" data-value="1">1td>
<td class="pvtVal row1 col8" data-value=" ">td>
<td class="pvtVal row1 col9" data-value="2">2td>
<td class="pvtTotal rowTotal" data-value="3" data-for="row1">3td>
tr>
tbody>
table>
<input type="button" id="export-data" src="images/icon/icon-excel.png" value="Export to Excel" onclick="tableToExcel('table')" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">script>
<script>
var tableToExcel = (function () {
var uri = 'data:application/vnd.ms-excel;base64,'
, template = '{table}
'
, base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
return function (table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
window.location.href = uri + base64(format(template, ctx))
}
})()
script>
body>
html>

You can try using Document conversion service from LEADTOOLS, which provides the ability to convert image formats to different document formats (such as Excel).
You can create your own REST or Web service and use the DocumentConverter class at the server side.
You can find an online demo that uses the document conversion service here:
https://demo.leadtools.com/JavaScript/DocumentViewer/
When you open the online demo, open your image and then select the menu "File\Export" to save the image as Excel (xls) format.

Also, the following online link provides more details about the DocumentConverter Class
https://www.leadtools.com/help/leadtools/v19/dh/doxc/documentconverter.html

Note that you can convert the base64 string into byte[] using the Convert.FromBase64String method:
https://msdn.microsoft.com/en-us/library/system.convert.frombase64string(v=vs.110).aspx
Then create a file or memory stream object from the byte[] using the FileStream or MemoryStream class constructor, save the image into a temp file or memory, and then pass it to the DocumentConverter class.

The following .NET C# code converts image formats (JPEG, PNG, BMP, etc.) to Excel (xls) using the document converter class:

//////////////////////////////////////////
using (DocumentConverter documentConverter = new DocumentConverter())
{
string OcrAdvantageRuntimeDir = @"c:\LEADTOOLS 19\Bin\Common\OcrAdvantageRuntime";
documentConverter.Options.EnableSvgConversion = true;
documentConverter.Options.JobErrorMode = DocumentConverterJobErrorMode.Abort;
using (var ocrEngine = OcrEngineManager.CreateEngine(OcrEngineType.Advantage, false))
{
var rasterCodecs = new RasterCodecs();
var documentWriter = new DocumentWriter();
ocrEngine.Startup(rasterCodecs, documentWriter, null, OcrAdvantageRuntimeDir);
documentConverter.SetOcrEngineInstance(ocrEngine, true);
documentConverter.Diagnostics.EnableTrace = true;
var inFile = @"C:\Users\Public\Pictures\Master.JPG";
var outFile = @"C:\Users\Public\Pictures\Master.xls";
var format = DocumentFormat.Xls;
var jobData = DocumentConverterJobs.CreateJobData(inFile, outFile, format);
jobData.JobName = "conversion job";
var job = documentConverter.Jobs.CreateJob(jobData);
documentConverter.Jobs.RunJob(job);
if (job.Status == DocumentConverterJobStatus.Success)
{
Console.WriteLine("Success");
}
else
{
Console.WriteLine("{0} Errors", job.Status);
foreach (var error in job.Errors)
{
Console.WriteLine(" {0} at {1}: {2}", error.Operation, error.InputDocumentPageNumber, error.Error.Message);
}
}
}
}
//////////////////////////////////////////

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jayesh Vyas8y ago
Hii Suraj Kumar I am not familiar with the c# and .net. actually, I need solution in Angular JS.
Can you please provide any solution or any hint related to this.
Maen Badwan8y ago
You can try using Document conversion service from LEADTOOLS, which provides the ability to convert image formats to different document formats (such as Excel).
You can create your own REST or Web service and use the DocumentConverter class at the server side.
You can find an online demo that uses the document conversion service here:
https://demo.leadtools.com/JavaScript/DocumentViewer/
When you open the online demo, open your image and then select the menu "File\Export" to save the image as Excel (xls) format.

Also, the following online link provides more details about the DocumentConverter Class
https://www.leadtools.com/help/leadtools/v19/dh/doxc/documentconverter.html

Note that you can convert the base64 string into byte[] using the Convert.FromBase64String method:
https://msdn.microsoft.com/en-us/library/system.convert.frombase64string(v=vs.110).aspx
Then create a file or memory stream object from the byte[] using the FileStream or MemoryStream class constructor, save the image into a temp file or memory, and then pass it to the DocumentConverter class.

The following .NET C# code converts image formats (JPEG, PNG, BMP, etc.) to Excel (xls) using the document converter class:
//////////////////////////////////////////
using (DocumentConverter documentConverter = new DocumentConverter())
{
string OcrAdvantageRuntimeDir = @"c:\LEADTOOLS 19\Bin\Common\OcrAdvantageRuntime";
documentConverter.Options.EnableSvgConversion = true;
documentConverter.Options.JobErrorMode = DocumentConverterJobErrorMode.Abort;

using (var ocrEngine = OcrEngineManager.CreateEngine(OcrEngineType.Advantage, false))
{
   var rasterCodecs = new RasterCodecs();
   var documentWriter = new DocumentWriter();

   ocrEngine.Startup(rasterCodecs, documentWriter, null, OcrAdvantageRuntimeDir);
   documentConverter.SetOcrEngineInstance(ocrEngine, true);
   documentConverter.Diagnostics.EnableTrace = true;

   var inFile = @"C:\Users\Public\Pictures\Master.JPG";
   var outFile = @"C:\Users\Public\Pictures\Master.xls";

   var format = DocumentFormat.Xls;
   var jobData = DocumentConverterJobs.CreateJobData(inFile, outFile, format);
   jobData.JobName = "conversion job";

   var job = documentConverter.Jobs.CreateJob(jobData);
   documentConverter.Jobs.RunJob(job);

   if (job.Status == DocumentConverterJobStatus.Success)
   {
      Console.WriteLine("Success");
   }
   else
   {
      Console.WriteLine("{0} Errors", job.Status);

      foreach (var error in job.Errors)
      {
         Console.WriteLine("  {0} at {1}: {2}", error.Operation, error.InputDocumentPageNumber, error.Error.Message);
      }
   }
}
}
//////////////////////////////////////////
Suraj Kumar8y ago
You can try, implement and get idea from the following link

https://www.aspsnippets.com/Articles/Export-GridView-with-Images-from-database-to-Word-Excel-and-PDF-Formats.aspx