3
Answers

Export Base64 Image to Excel.

Jayesh Vyas

Jayesh Vyas

7y
315
1
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.
  1. <html>  
  2. <head>  
  3. </head>  
  4. <body>  
  5. <table id="table" border="1" class="pvtTable" data-numrows="6" data-numcols="10">  
  6. <tbody>  
  7. <tr>  
  8. <th colspan="1" rowspan="1"></th>  
  9. <th class="pvtAxisLabel">Product Name</th>  
  10. <th class="pvtColLabel" colspan="1" rowspan="2">610164</th>  
  11. <th class="pvtColLabel" colspan="1" rowspan="2">110152909</th>  
  12. <th class="pvtColLabel" colspan="1" rowspan="2">B1</th>  
  13. <th class="pvtColLabel" colspan="1" rowspan="2">Derived</th>  
  14. <th class="pvtTotalLabel" rowspan="2">Count</th>  
  15. </tr>  
  16. <tr>  
  17. <th class="pvtAxisLabel">Thumbnail12Prod</th>  
  18. <th></th>  
  19. </tr>  
  20. <tr>  
  21. <th class="pvtRowLabel" rowspan="1" colspan="2"><a href="#"><img src="data:image/png;base64,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"></a> </th>  
  22. <td class="pvtVal row0 col4" data-value="1">1</td>  
  23. <td class="pvtVal row0 col7" data-value=" "></td>  
  24. <td class="pvtVal row0 col8" data-value=" "></td>  
  25. <td class="pvtVal row0 col9" data-value=" "></td>  
  26. <td class="pvtTotal rowTotal" data-value="1" data-for="row0">1</td>  
  27. </tr>  
  28. <tr>  
  29. <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>  
  30. <td class="pvtVal row1 col4" data-value=" "></td>  
  31. <td class="pvtVal row1 col5" data-value="1">1</td>  
  32. <td class="pvtVal row1 col8" data-value=" "></td>  
  33. <td class="pvtVal row1 col9" data-value="2">2</td>  
  34. <td class="pvtTotal rowTotal" data-value="3" data-for="row1">3</td>  
  35. </tr>  
  36. </tbody>  
  37. </table>  
  38. <input type="button" id="export-data" src="images/icon/icon-excel.png" value="Export to Excel" onclick="tableToExcel('table')" />  
  39. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  40. <script>  
  41. var tableToExcel = (function () {  
  42. var uri = 'data:application/vnd.ms-excel;base64,'  
  43. template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'  
  44. base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }  
  45. format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }  
  46. return function (table, name) {  
  47. if (!table.nodeType) table = document.getElementById(table)  
  48. var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }  
  49. window.location.href = uri + base64(format(template, ctx))  
  50. }  
  51. })()  
  52. </script>  
  53. </body>  
  54. </html>
Answers (3)
0
Jayesh Vyas

Jayesh Vyas

NA 163 4.9k 7y
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. 
0
Maen Badwan

Maen Badwan

NA 408 69 7y
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:
  1. //////////////////////////////////////////  
  2. using (DocumentConverter documentConverter = new DocumentConverter())  
  3. {  
  4. string OcrAdvantageRuntimeDir = @"c:\LEADTOOLS 19\Bin\Common\OcrAdvantageRuntime";  
  5. documentConverter.Options.EnableSvgConversion = true;  
  6. documentConverter.Options.JobErrorMode = DocumentConverterJobErrorMode.Abort;  
  7.   
  8. using (var ocrEngine = OcrEngineManager.CreateEngine(OcrEngineType.Advantage, false))  
  9. {  
  10.    var rasterCodecs = new RasterCodecs();  
  11.    var documentWriter = new DocumentWriter();  
  12.   
  13.    ocrEngine.Startup(rasterCodecs, documentWriter, null, OcrAdvantageRuntimeDir);  
  14.    documentConverter.SetOcrEngineInstance(ocrEngine, true);  
  15.    documentConverter.Diagnostics.EnableTrace = true;  
  16.   
  17.    var inFile = @"C:\Users\Public\Pictures\Master.JPG";  
  18.    var outFile = @"C:\Users\Public\Pictures\Master.xls";  
  19.   
  20.    var format = DocumentFormat.Xls;  
  21.    var jobData = DocumentConverterJobs.CreateJobData(inFile, outFile, format);  
  22.    jobData.JobName = "conversion job";  
  23.   
  24.    var job = documentConverter.Jobs.CreateJob(jobData);  
  25.    documentConverter.Jobs.RunJob(job);  
  26.   
  27.    if (job.Status == DocumentConverterJobStatus.Success)  
  28.    {  
  29.       Console.WriteLine("Success");  
  30.    }  
  31.    else  
  32.    {  
  33.       Console.WriteLine("{0} Errors", job.Status);  
  34.   
  35.       foreach (var error in job.Errors)  
  36.       {  
  37.          Console.WriteLine("  {0} at {1}: {2}", error.Operation, error.InputDocumentPageNumber, error.Error.Message);  
  38.       }  
  39.    }  
  40. }  
  41. }  
  42. ////////////////////////////////////////// 
 
 
0
Suraj Kumar

Suraj Kumar

NA 1.3k 14.3k 7y
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