Phantom-Pdf Header Footer images in Template

aftabrehman1001

I want to display header and footer images in template. As you mentioned in your documentation we need to add image in the content template with visible off. According to your documentation we need to use child template for displaying header and footer. My basic question is how we can create child template using POST API as I am using jsreport api to get pdf view. I have attached some piece of code to get understand. I am using jsreport 1.9.2 and other thing when ever I use header and footer option through Phantom options its returns nothing. So I follow your instructions through multiple forums having detail that we need to use child templates for header and footer.

var helper = ' ';
var phantomOptions = JSON.parse('{ "format": "A4" ,"orientation": "landscape" ,"margin": { "top": "1px", "left": "1px", "right": "1px", "bottom": "1px" } }');

    phantomOptions.Header = "hello header";
    phantomOptions.Footer = '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOGF0ZTptb2RpZnkAMjAxNy0wNC0yNVQxMDoyOTowNyswMjowMH8oHHgAAAAASUVORK5CYII=" height="50" width="50">';*/
    var templateDataJson = JSON.stringify(templateData.dataJson),
    templateObject = {
        "content": '<div>Hello world</div>',
        "engine": "handlebars",
        "recipe": "phantom-pdf",
        "phantom": phantomOptions,
        "helpers": "",
        shortid: (new Date().getTime())
    },
    tData = {
        template: templateObject,
        data: '',
        options: { "reports": { "save": true } }
    }

By using this approach how can i create child template and can use it in main template.

jan_blaha

We don't say in the documentation you need to use child templates for headers. It is just one option.
In your request, you just need to take the same image you have in the phantomOptions.Footer and put it also to the templateObject.content.

See the demo. You can check how the request looks in the F12 browser tools.
https://playground.jsreport.net/w/jan_blaha/m20DFDtx

aftabrehman1001

In the above example you are using a child template named "Image in header header" where you placed image tag and also in main template image is a placed with display none. For this I need to create child template. I am using Post api for pdf view. Is this possible to create child template and then use it in main template through post api. Actually I am creating template on run time on the base of options and also need images in the header and footer.
Can you please tell me how we can create child template using POST API or there is any other option to do that?

jan_blaha

You get it wrong. I didn't create or use child template. Please read more about child templates in the docs.

Again, you don't have to create a template or use a child template. You can do everything in single post to /api/report.
In the limited way it looks like this:

{
  "template": {
    "recipe": "phantom-pdf",
    "engine": "none",
    "content": "<img style='display:none'... />",
    "phantom": {
      "header": "<img ... />"
    }
  }
}

If you would really want to use child templates. You need to first create a template using OData POST.
https://jsreport.net/learn/api#create