Formatting issue with pdfCreatePagesGroup

  • Hi,

    I've come across an issue where if the data being passed to a header footer form contains a long text string it is impacting the page width. In my case the data contains an encrypted URL which is hundreds of characters long.

    If I look at the HTML generated by pdfCreatePagesGroup with a short string I get:

    <span style='position:absolute;text-transform: none;opacity: 0.01;fontsize:1.1px'>group@@@InBvdGF0byI=@@@</span>

    and this if the data contains a really long URL

    <span style='position:absolute;text-transform: none;opacity: 0.01;fontsize:1.1px'>group@@@eyJTZXR0aW5ncyI6eyJnZW5iZ3RoZW1lY29sb3IiOiIjNDE2YzkwIn0sIlNjaG9vbCI6eyJJZCI6MSwiVW5pcXVlSWQiOiI0Y2E2OTMzYy1hOGY5LT (gets cut off on the page due to its length but spans the entire page and throws the width)

    Is this a known issue and is there an easy work around?

    Thanks again.
    (I'm using chrome-pdf and jsrender)

  • It is a limitation. I will document it.

    Try to pass small values, just ids or indexes to an array.

  • Thanks @jan_blaha The value being passed is a link to an image in azure storage which varies per report so I'm not sure how that will help. Is there any way to override the <span> width?

  • How do you assemble the image url? I think there is a way to have image urls on the root data and pass just an index as group value.
    You can use custom script and beforeRender hook to modify the input data as you need.

  • Hi @jan_blaha

    Can you please give me some more direction on that solution please.

    Here are the details of how we are using the URL.

    The URL is assembled in .Net and passed through in JSON format as follows:

        "Data": [
                "HeaderFooter": {
                    "Student": {
                            "Id": 9,
                            "ImageUrl": "https://website/folder-path/filename.jpg?securitytokendetail"
    				"School": {
    					"EmblemUrl" : "https://website/folder-path/filename.jpg?securitytokendetail"
    		"LotsofOtherSections": {}

    in .Net jsreport is called like this:

                var PDFreport = await rs.RenderByNameAsync("reportname", reportJson, cancellationToken);
                    return File(PDFreport.Content, "application/octet-stream");

    In jsreport in the main template we use this:


    In the header footer the URL is referenced like this, note this is one example, the student image can also be displayed.

     <img src={{:School.EmblemUrl}} onerror="this.onerror=null;this.src='{#asset blankschoollogo.png @encoding=dataURI}';" class="logo" />

    Thanks again.

  • This post is deleted!

  • Extend for example HeaderFooter with an Id attribute when you prepare the reportJson.
    In main template do {{:~pdfCreatePagesGroup(HeaderFooter.Id)}}
    In the merged operation search the root data Data array for HeaderFooter with the passed Id.
    Get the ImageUrl and use it.

  • @jan_blaha Thanks for that I get the concept but I'm not sure how to do the second part i.e. searching for the id in the merged operation. For the sake of time we ended up implementing a URL shorterning service but I think your solution would make life easier going forward. We're now finding that using {{if}} fails if we reference any of the values e.g. {{>~root.$pdf.pages[#index].group.Student.Student.FullName}} will return the value we need but wrap it in an if statement and we get Cannot read property 'group' of undefined at Object.callbackRequests. Is this a known issue with a workaround (I have checked the forum for other {{if}} issues but cannot find this one specifically.)

  • Looks like the answer is to use helpers instead. That gets me moving forward at least. I'm now wrapping sections in <div style={display:{{:~helpername(mysettings)}} to return "block" or "none" which works pretty well.

  • @jan_blaha would you be able to provide an example of how to search the root data in the merged operation using jsrender? Thanks again.

  • Hi @jan_blaha with regards to your comment "In main template do {{:~pdfCreatePagesGroup(HeaderFooter.Id)}} In the merged operation search the root data Data array for HeaderFooter with the passed Id." How do you search for the id the merged operation? is there an example somewhere I can reference?

  • Something like this could work

    function findSomething(root, id) {
      return root.items.find(i => ===id)
    {{:~findSomething(~root, ~root.$pdf.pages[0].group).name}}

Log in to reply

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.