We have a jsreport server with which interact from a browser UI application via @jsreport/browser-client npm module.

For now we're trying to print one of the samples provided at initialisation step:

jsreport.serverUrl = 'http://localhost:5488';
jsreport.download('invoice.pdf', {
  template: {name: 'invoice-main'},
  data: { ... }
}

We wish to attach a custom header to the request, such as X-Header. As per the documentation here, we attach the header as such: jsreport.headers['X-Header'] = 'value';.

The request is successful, and we receive a proper PDF back. But, this does not attach the HTTP header to the request, and instead has no effect. This behaviour was seen by inspecting the request the Chrome dev-tools.

The ordering of the statements and call to the jsreport instance are below:

import jsreport from '@jsreport/browser-client';

jsreport.headers['X-Header'] = 'value';

jsreport.serverUrl = 'http://localhost:5488';

jsreport.download('invoice.pdf', {
  template: {name: 'invoice-main'},
  data: { ... }
}

What you need to use is jsreport.render and then call download on the result.

jsreport.serverUrl = 'http://myjsreport.com'
const report = await jsreport.render({
  template: {
    content: 'Hello from {{message}}',
    engine: 'handlebars',
    recipe: 'chrome-pdf'
  },
  data: {
    someData: 'browser client'
  }
})
report.download('myreport.pdf')