jsreports example

Report Designer

You can embed the jsreports report designer in your application to enable your users to create and modify their own reports.

Source code snippets are shown below the designer. View the source of this page for the full code.

The code

Instantiating a designer in a target element:

var designer = new jsreports.Designer({
  embedded: true,
  container: $(".report-designer-container"),
  data_sources: data_sources,
  images: [{
    name: "ACME logo",
    url: "images/acme-logo.png"
  }],
  report_def: report_def,
  layout: "horizontal"
});