TheSalarKhan/PhantomJs.NetCore

Cannot render images

Closed this issue · 3 comments

aleksandarcolic88 commented

I'm evaluating this nuget for reporting solution and all things looks excellent (great work @TheSalarKhan and @joaolucasgtr) but I cannot find way to render image. Can someone please assist. I'm trying to build asp.net core 3.1 web app and my code goes as follows

public async Task<IActionResult> Get3()
        {
            var generator = new PdfGenerator();
            var htmlToConvert = @"
                    <!DOCTYPE html>
                        <html>
                            <body>
                                <img src="".\static\alex.bmp"">
                            </body>
                        </html>";

            var currentDirectory = Directory.GetCurrentDirectory();

            // call method GeneratePdf with the html string and the output directory:
            var pathOfGeneratedPdf = generator.GeneratePdf(htmlToConvert, currentDirectory);

            // print the full path of the generated file:

            Console.WriteLine("Pdf generated at: " + pathOfGeneratedPdf);


            var resp = System.IO.File.ReadAllBytes(pathOfGeneratedPdf);

            return File(resp, "application/pdf");
        }

additionally I have static folder in my project which contains alex.bmp

I have tried with <img src=""~\static\alex.bmp""> but no luck

Can someone provide example how to add image

joaolucasgtr commented

Hy @aleksandarcolic88, thanks for your feedback.

Render images like this: <img src="".\static\alex.bmp""> is not going to work because we need a full "standalone" html document before rendering a pdf file from it. Any additional file (images, styles, etc) must be previously included because we don't have a browser to request this files.

So, you have to embedd your images inside the html string before the render process, by converting them to base64 encoded string.

One way of doing that is:

// create a simple utility method that takes in the path of a image and returns the encoded string:
public string ImageToBase64(string pathOfImage)
{
  var fileBytes = File.ReadAllBytes(pathOfImage);
  var base64String = Convert.ToBase64String(fileBytes);
  
  return $@"data:image/jpg;base64,{base64String}";
}

then insert into your html string:

public async Task<IActionResult> Get3()
{
  var base64Img = ImageToBase64("{{path of your image}}");
  
  var generator = new PdfGenerator();
  var htmlToConvert = $@"
      <!DOCTYPE html>
        <html>
          <body>
            <img class=""some-class"" src=""{base64Img}"">
          </body>
        </html>";

  var currentDirectory = Directory.GetCurrentDirectory();

  // call method GeneratePdf with the html string and the output directory:
  var pathOfGeneratedPdf = generator.GeneratePdf(htmlToConvert, currentDirectory);

  // print the full path of the generated file:
  Console.WriteLine("Pdf generated at: " + pathOfGeneratedPdf);

  var resp = System.IO.File.ReadAllBytes(pathOfGeneratedPdf);

  return File(resp, "application/pdf");
}

I hope this helps!

  • 👍1
aleksandarcolic88 commented

@joaolucasgtr Whoa, thanks for such quick response. I actually found out how to do it after I opened source of nuget package and inspected it. My presumption was that PdfGenerator uses currentDirectory as base path but in fact it uses AppDomain.CurrentDomain.BaseDirectory (L17 in PdfGenerator.cs) and then I figured out that I'm not copying my static file into output folder.
When I set Copy To Output Dir setting to true it renders image. Maybe this could be documented somehow so It does not get lost.

Then image can be accessed like

...
<img src=""static/alex.bmp"">
...
joaolucasgtr commented

@aleksandarcolic88 That's awesome!

I'll include this to the source code later on.

Thanks 👍

  • ❤️1