Image in title

Aspose.HTML Product Family
1

Hello!

I’ve tried to add image to the title but it didn’t work out. Could you please help me with it and describe how can I do it? In code examples I found -aspose-content with text in it. May be there is a way to add an image? If it’s not possible how can I solve such issue? Thank you.

Best Regards,
Gleb.

2

@GlebLevotsky

Can you please share which code sample are you using? Please share your sample code snippet as well as used image so that we can test the scenario in our environment and address it accordingly.

3 
@page {
  /* Page margins should be not empty in order to write content inside the margin-boxes */
  margin-top: 1cm;
  margin-left: 2cm;
  margin-right: 1cm;
  margin-bottom: 1cm;

  /* Page counter located at the bottom of the page */
  @bottom-right
  {
    -aspose-content: "Page" currentPageNumber() " of " totalPagesNumber();
    color: green;
  }

  /* Page title located at the top-center box */
  @top-center
  {
    -aspose-content: **here should be image;**
    vertical-align: bottom;
    color: blue;
  }
}
4

I’ve tried put there smth like url('data:image/jpeg;base64,…); and it works, but this variant is too long.
But when I tried svg form like url("data:image/svg+xml,%3C%3Fxml version=‘1.0’…) it didn’t work.

5

If I can do it (add image to the header) by code it also suits to me.

6

@GlebLevotsky

Would you please also share the C# or Java code that you are trying to process this HTML? We will test the case accordingly and share our feedback with you.

7 
        var htmlTemplate = await _razorLightEngine.CompileRenderAsync("ReportTemplates/Example/example", new
        {
            H1Text = "H1Text",
            H2Text = "H2Text",
            SpanText = "SpanText",
        });

        var path = Path.Combine(
            Directory.GetCurrentDirectory(),
            "..",
            "Infrastructure",
            "Resources",
            "ReportTemplates",
            "Example",
            "example.css");

        var cssData = await File.ReadAllTextAsync(path);

        using var configuration = new Configuration();
        var userAgent = configuration.GetService<Aspose.Html.Services.IUserAgentService>();
        userAgent.UserStyleSheet = cssData;

        using var memoryStreamProvider = new MemoryStreamProvider();
        using var document = new HTMLDocument(htmlTemplate, ".", configuration);

        var options = new PdfSaveOptions
        {
            PageSetup =
            {
                AnyPage = new Page
                {
                    Size = new Size(width: Length.FromInches(20), height: Length.FromInches(10)),
                },
            },
        };

        Converter.ConvertHTML(document, options, "example.pdf");

This code works correctly. I can create new pdf file with all styles, but without header.

8

@GlebLevotsky

We have generated a ticket as HTMLNET-4460 in our issue tracking system to address this scenario. We will look into its details and keep you posted with the status of its correction. Please be patient and spare us some time.

We are sorry for the inconvenience.

9

@GlebLevotsky

To begin with, we would like to say that it is better to set page margins not through CSS, but through the PdfSaveOptions class, since at the moment there is a problem with their processing.
Regarding the issue itself, we can offer two ways to add an image to the title with a short URL.

The first is to specify the name of the picture that he will put in the directory next to the library. Then CSS can be abbreviated as follows:

@page {
  /* Page counter located at the bottom of the page */
  @bottom-right
  {
    -aspose-content: "Page" currentPageNumber() " of " totalPagesNumber();
    color: green;
  }

  /* Page title located at the top-center box */
  @top-center
  {
    -aspose-content: url(name.svg);
    vertical-align: bottom;
    color: blue;
  }
}

The second way is to create a custom MessageHandler and set the path to the image through a custom protocol. This approach can be used when the file system is not available. The implementation of this approach is shown in the following code snippet:

@page {
  /* Page counter located at the bottom of the page */
  @bottom-right
  {
    -aspose-content: "Page" currentPageNumber() " of " totalPagesNumber();
    color: green;
  }

  /* Page title located at the top-center box */
  @top-center
  {
    -aspose-content: url(header://name.svg);
    vertical-align: bottom;
    color: blue;
  }
}

using var configuration = new Configuration();
var userAgent = configuration.GetService<Aspose.Html.Services.IUserAgentService>();
userAgent.UserStyleSheet = cssData;
configuration.GetService<INetworkService>().MessageHandlers.Insert(0, new TitleMessageHandler());

using var document = new HTMLDocument(htmlTemplate, ".", configuration);

var options = new PdfSaveOptions
{
    PageSetup =
    {
        AnyPage = new Page
        {
            Size = new Size(width: Length.FromInches(20), height: Length.FromInches(10)),
            Margin = new Margin(Unit.FromCentimeters(2), Unit.FromCentimeters(1), Unit.FromCentimeters(1), Unit.FromCentimeters(1))
        },
    },
};

Converter.ConvertHTML(document, options, "example.pdf");

public class TitleMessageHandler : MessageHandler
{
    public TitleMessageHandler()
    {
        Filters.Add(new ProtocolMessageFilter("header"));
    }

    public override void Invoke(INetworkOperationContext context)
    {
        context.Response = new ResponseMessage(HttpStatusCode.OK)
        {
            Request = context.Request,
            Content = new StringContent(
@"<svg xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink"" width=""100"" height=""100"" viewBox=""0 0 100 100"">
<rect y=""0"" x=""0"" width=""100"" height=""100"" fill=""green"" />
</svg>"),
            Headers = { ContentType = { MediaType = "image/svg+xml" } }
        };
    }
}
10

The issues you have found earlier (filed as HTMLNET-4460) have been fixed in this update. This message was posted using Bugs notification tool by avpavlysh