Ankareport NPM

Purpose

Free & Open Source Web Reporting Tool

Features

Add/Remove Item
Bindings
Styles
Color Picker
Move & Size
Bulk Move & Resize
Add Sub Group
Remove Sub Group
Style By Group
Undo/Redo
Elements List
Report Viewer
Export To PDF
Custom PDF Converter

Contributing

yarn install
yarn dev
# open localhost:8080

Setup

<html>
  <head>
    ...

    <link
      rel="stylesheet"
      href="https://unpkg.com/ankareport/dist/ankareport.css"
    />
  </head>
  <body>
    ...

    <script src="https://unpkg.com/ankareport/dist/ankareport.js"></script>
  </body>
</html>

Quick Start

<div id="designer"></div>

<script>
  const designerDiv = document.getElementById("designer");
  const designer = AnkaReport.designer({
    element: designerDiv,
    dataSource: dataSource,
    layout: layout,
    onSaveButtonClick: (layout) => {
      console.log(layout);
    },
  });
</script>

<div id="report"></div>

<script>
  const reportDiv = document.getElementById("report");
  const report = AnkaReport.render({
    element: reportDiv,
    layout: layout,
    data: data,
  });
</script>

const dataSource = [
  { label: "Header 1", field: "header1" },
  { label: "Header 2", field: "header2" },
  {
    label: "Content",
    children: [
      { label: "Name", field: "name" },
      { label: "Surname", field: "surname" },
    ],
  },
  { label: "Footer 1", field: "footer1" },
  { label: "Footer 2", field: "footer2" },
];

const layout = {
  width: 500,
  headerSection: {
    height: 50,
    items: [
      {
        text: "Header 1",
        binding: "header1",
        x: 5,
        y: 4,
        width: 100,
        height: 20,
      },
      {
        text: "Header 2",
        binding: "header2",
        x: 5,
        y: 28,
        width: 200,
        height: 20,
      },
    ],
  },
  contentSection: {
    height: 75,
    binding: "content",
    items: [
      {
        text: "Label1",
        binding: "name",
        x: 9,
        y: 6,
        width: 100,
        height: 20,
      },
      {
        text: "Label2",
        binding: "surname",
        x: 9,
        y: 26,
        width: 200,
        height: 40,
      },
    ],
  },
  footerSection: {
    height: 40,
    items: [
      {
        text: "Copyright",
        x: 150,
        y: 8,
        width: 100,
        height: 20,
      },
      {
        text: "Desc",
        binding: "footer2",
        x: 250,
        y: 8,
        width: 100,
        height: 20,
      },
    ],
  },
};

const data = {
  header1: "Header 1",
  header2: "Header 2",
  content: [
    {
      name: "John1",
      surname: "Doe1",
    },
    {
      name: "John2",
      surname: "Doe2",
    },
    {
      name: "John3",
      surname: "Doe3",
    },
  ],
  footer1: "Footer 1",
  footer2: "Footer 2",
};

@everything-registry/sub-chunk-1141

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago