How to use {{ }} in header or footer to display variables along a document

[evivar]

I'm trying to use the header to show a name that is given in the report data using

 var options = {
            format: "A3",
            orientation: "portrait",
            border: '10mm',
            header: {
                contents: '<h1 class="text-center" style="margin-bottom:0.5em;">{{user}}</h1>'
            }
}

And {{user}} is defined inside the report.data object, but when I render the PDF in the header appears {{user}} instead of the value of the user variable.

[dandresfg]

            header: {
                contents: `<h1 class="text-center" style="margin-bottom:0.5em;">${user}</h1>`
            }

Using template strings

[talski]

A workaround, but I think it should be compiled with data just like main template as default.

// backslash to do not evaluate in the first compile
headerTemplate = '<div>My Header: \{{page}} {{userName}}</div>';

const options = {
  format: "A4",
  orientation: "portrait",
  border: "10mm",
  header: {
    height: "45mm",
    contents: {
      // this way you can put your header template in another file
      default: Handlebars.compile(headerTemplate)({userName: 'John Doe'}),
    },
  },
};