PictureBox Rendering problem when exporting to HTML5

[Dominic]

Hello, 

I have a report which contains a PictureBox with an URL as value property.

When I export to PDF or Excel, the image is displayed with no problems.

However, when I try to export the report to HTML5 (which generate multiple streams), the image is not converted to an HTML tag (like <img>). What I see instead is something like this : "����JFIF



��� ( %!1!%)+...383,7(-.+
 ,$$,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,���� ...". It's the representation in text of the image.

Is there anyway to fix this problem?

Here is the code I use to export in HTML5:

//Method used for rendering the report
public List<Stream> GenerateTelerik(string languageCode = "en")
        {
            CultureInfo cultureInfo;
            cultureInfo = languageCode == "fr" ? new CultureInfo("fr-CA") : new CultureInfo("en-US");

            // Set the language for static text (i.e. column headings, titles)
            System.Threading.Thread.CurrentThread.CurrentUICulture = cultureInfo;

            // Set the language for dynamic text (i.e. date, time, money)
            System.Threading.Thread.CurrentThread.CurrentCulture = cultureInfo;

            var reportProcessor = new Telerik.Reporting.Processing.ReportProcessor();

            // set any deviceInfo settings if necessary
            var deviceInfo = new System.Collections.Hashtable();

            var reportviewer = new Telerik.Reporting.InstanceReportSource
            {
                ReportDocument = _reportObject
            };

            var renderType = getRenderType(_exportFormat);

            if (_exportFormat == ExportFormat.HTML5)
            {
                deviceInfo["OutputFormat"] = renderType;
                string documentName;

                var result = reportProcessor.RenderReport(renderType, reportviewer, deviceInfo, CreateStream,
                    out documentName);

                if (result)
                {
                    return _streams;
                }

                throw new Exception("Failed to export to HTML5");
            }
            else
            {
                var result = reportProcessor.RenderReport(renderType, reportviewer, deviceInfo);
                _streams.Add(new MemoryStream(result.DocumentBytes));
                return _streams;
            }

        }

//For Handling multiple streams
Stream CreateStream(string name, string extension, Encoding encoding, string mimeType)
        {
            string path = Path.GetTempPath();
            string filePath = Path.Combine(path, name + "." + extension);

            FileStream fs = new FileStream(filePath, FileMode.Create);
            _streams.Add(fs);
            return fs;
        }

//And when I want to render the HTML5 to the browser: (method in a controller in MVC application)
private HttpResponseMessage GetHtml5ResponseMessage(List<Stream> streams, TelerikReporting.ExportFormat exportFormatTyped)
        {
            string data = string.Empty;
            foreach (var stream in streams)
            {
                StreamReader readStream = null;
                stream.Position = 0;
                readStream = new StreamReader(stream);
                data += readStream.ReadToEnd();
                readStream.Close();
            }

            return new HttpResponseMessage()
            {
                Content = new StringContent(data, Encoding.UTF8, getMIMEType(exportFormatTyped))
            };
        }

[Stef]

Hello Dominic,

We tested to render report in HTML5 format without any additional specific device settings for the rendering extension.

All images are processed by the reporting engine and turned into resources even if images are specified by URL. All files were saved without extensions as PictureBox items are rendered as IMG elements with SRC attribute pointing to the image file without extension:

<div title="" class="pictureBox1 s1-" style="position: absolute; overflow: hidden; left: 547px; top: 144px; width: 250px; height: 173px;">
               <img alt="" src="b3c1474cce8e4290b4729547b76b8467" style="position: absolute; top: 8px; left: 0px; width: 250px; height: 156px;" />
           </div>

Note that the HTML5 rendering extension will produce an HTML document per page of the report. Also it is important what mime type on returning the response and how the response is used.

In order to provide you further suggestions, please open a support ticket and send us a demo project illustrating how the illustrated methods are used and their result.

Regards,
Stef
Telerik

 

 

[Dominic]

I have finally found the solution.

The first thing was not to render the image (from the streams) into the HtmlReponse.

The second thing was to find the image tags into the generated HTML from the report engine and replace the SRC attribute from the image tag with the real url of the image.

For anyone who is interested by that solution, here is the code: 

public List<Stream> GenerateTelerik(string languageCode = "en")
       {
           CultureInfo cultureInfo;
           cultureInfo = languageCode == "fr" ? new CultureInfo("fr-CA") : new CultureInfo("en-US");

           // Set the language for static text (i.e. column headings, titles)
           System.Threading.Thread.CurrentThread.CurrentUICulture = cultureInfo;

           // Set the language for dynamic text (i.e. date, time, money)
           System.Threading.Thread.CurrentThread.CurrentCulture = cultureInfo;

           var reportProcessor = new Telerik.Reporting.Processing.ReportProcessor();

           // set any deviceInfo settings if necessary
           var deviceInfo = new System.Collections.Hashtable();

           var reportviewer = new Telerik.Reporting.InstanceReportSource
           {
               ReportDocument = _reportObject
           };

           var renderType = getRenderType(_exportFormat);

           if (_exportFormat == ExportFormat.HTML5)
           {
               deviceInfo["OutputFormat"] = renderType;
               string documentName;

               var result = reportProcessor.RenderReport(renderType, reportviewer, deviceInfo, CreateStream,
                   out documentName);

               if (result)
               {
                   if (_exportFormat == ExportFormat.HTML5 && _telerikImagePaths != null)
                   {
                       return GetReportStreamWithImages();
                   }
                   else
                   {
                       return _streams;
                   }
               }

               throw new Exception("Failed to export to HTML5");
           }
           else
           {
               var result = reportProcessor.RenderReport(renderType, reportviewer, deviceInfo);
               _streams.Add(new MemoryStream(result.DocumentBytes));
               return _streams;
           }

       }

       Stream CreateStream(string name, string extension, Encoding encoding, string mimeType)
       {
           string path = Path.GetTempPath();
           string filePath;
           string data;

           if (mimeType.Contains("image"))
           {
               filePath = Path.Combine(path, name);
           }
           else
           {
               filePath = Path.Combine(path, name + "." + extension);
           }

           FileStream fs = new FileStream(filePath, FileMode.Create);

           _streams.Add(fs);
           return fs;
       }

       List<Stream> GetReportStreamWithImages()
       {
           string data;
           List<Stream> newStreams = new List<Stream>();

           foreach (var stream in _streams)
           {
               StreamReader readStream = null;
               stream.Position = 0;
               readStream = new StreamReader(stream);
               data = readStream.ReadToEnd();

               if (data.StartsWith("<"))
               {
                   HtmlDocument html = new HtmlDocument();
                   html.LoadHtml(data);
                   HtmlNode document = html.DocumentNode;

                   //Find Images here
                   foreach (var imagePath in _telerikImagePaths)
                   {
                       var divElement = document.SelectNodes("//*[contains(@class,'" + imagePath.Item1 + "')]");
                       if (divElement != null)
                       {
                           var imageElement = divElement.FirstOrDefault().FirstChild;
                           imageElement.SetAttributeValue("src", imagePath.Item2);
                       }

                   }

                   byte[] byteArray = Encoding.UTF8.GetBytes(document.OuterHtml);
                   MemoryStream memoryStream = new MemoryStream(byteArray);
                   newStreams.Add(memoryStream);
               }


           }

           return newStreams;
       }