面向零基础开发者的纯前端报表组件

2023-11-25 21:24:33

对于前端开发者来说，报表一直是一个比较头疼的问题。传统的报表开发需要使用专业的报表工具，如Crystal Reports、Power BI等，这些工具虽然功能强大，但学习成本高、使用门槛高，而且往往需要付费。

ActiveReportsJS是一款纯前端的报表控件，不仅可以在前端框架Vue、Angular、React中直接集成使用，还可以在纯JavaScript应用中集成。ActiveReportsJS功能强大，支持多种数据源、多种图表类型、多种布局方式，而且完全开源免费。

教程

1. 安装ActiveReportsJS

npm install activereport-js

2. 创建一个新的JavaScript项目

mkdir my-project
cd my-project
npm init -y

3. 在项目中添加ActiveReportsJS

npm install activereport-js

4. 创建一个新的HTML文件

index.html

5. 在HTML文件中添加ActiveReportsJS

<!DOCTYPE html>
<html>
<head>
  
  <script src="node_modules/activereport-js/dist/activereport-js.min.js"></script>
</head>
<body>
  <div id="report"></div>

  <script>
    // 创建报表对象
    var report = new ActiveReportsJS.Report();

    // 设置报表数据源
    report.setData({
      "items": [
        {
          "id": 1,
          "name": "Item 1",
          "price": 10.00
        },
        {
          "id": 2,
          "name": "Item 2",
          "price": 20.00
        },
        {
          "id": 3,
          "name": "Item 3",
          "price": 30.00
        }
      ]
    });

    // 设置报表布局
    report.setLayout({
      "title": "Sales Report",
      "columns": [
        {
          "name": "ID",
          "width": 50
        },
        {
          "name": "Name",
          "width": 150
        },
        {
          "name": "Price",
          "width": 100
        }
      ]
    });

    // 渲染报表
    report.render(document.getElementById('report'));
  </script>
</body>
</html>