运行时创建报表 API

ActiveReportsJS 除了提供报表 Viewer 以及 Report 设计器两大功能组件外，本次更新为我们带来了更加丰富的 API 帮助开发人员在运行时创建报表，并一键导出到PDF，Excel，HTML 格式。该功能是为开发人员提供的，以便处理需要运行时创建报表需求，如用户动态选择列，用户动态设置图表类型等交互式功能，本文主要演示了如何使用API 创建简单的报表并导出为PDF 文件。示例以 React 框架为示例。但该功能不仅限于 React框架使用。如果需要在开发工具中获取更多API 的提示，我们建议在VS Code 中使用IntelliSense 插件。

创建 React 应用

使用 React 工具创建项目是最简单的方法，参考Create React App。在终端中执行以下命令来创建React Typescript应用。更多创建 React 项目的资料，可查看官方文档入门指南。

# npm 6.x
npm init react-app arjs-api --template typescript

# npm 7+, extra double-dash is needed
npm init react-app arjs-api -- --template typescript

或者使用 yarn 命令：

yarn create react-app arjs-api --template typescript

更多创建 React应用的方法参考官方文档

安装 ActivereportsJS npm 包

ActiveReportsJS API 被封装在 @grapecity/activereports npm 包中。该核心包中包含了导出及其他核心功能，执行以下命令安装：

npm install @grapecity/activereports

或者使用 yarn 命令：

yarn add @grapecity/activereports

实现报表服务

在 src 文件夹中，创建新的文件并命名为 reportService.ts ，输入以下代码:

import { Rdl as ARJS, PageReport } from "@grapecity/activereports/core";
import { PdfExport } from "@grapecity/activereports";

export function buildReportDefinition(): ARJS.Report {
  const report: ARJS.Report = {};
  report.Width = "8.5in";
  report.Page = {
    TopMargin: "0.5in",
    BottomMargin: "0.5in",
    LeftMargin: "0.5in",
    RightMargin: "0.5in",
    PageWidth: "8.5in",
    PageHeight: "11in",
  };
  const textbox: ARJS.Textbox = { Type: "textbox", Name: "txtGreetings" };
  textbox.Value = "Hello, ActiveReportsJS";
  textbox.Style = {
    FontSize: "18pt",
  };
  textbox.Width = "7in";
  textbox.Height = "0.5in";
  report.Body = { ReportItems: [textbox] };
  return report;
}

export async function exportReport(
  reportDefinition: ARJS.Report
): Promise<PdfExport.PdfExportResult> {
  const pageReport = new PageReport();
  await pageReport.load(reportDefinition);
  const doc = await pageReport.run();
  return PdfExport.exportDocument(doc, {
    info: {
      title: "Generated by ActiveReportsJS",
    },
  });
}

函数的定义和使用，可查看ActiveReportsJS API Core API 文档。导出API 可查看 PDF Export API文档。

使用报表服务

打开src\App.tsx 文件，并使用新代码替换：

import "./App.css";
import { buildReportDefinition, exportReport } from "./reportService";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <a
          className="App-link"
          href="."
          onClick={(e) => {
            e.preventDefault();
            const reportDefinition = buildReportDefinition();
            exportReport(reportDefinition)
              .then((result) => {
                result.download("ActiveReportsJSReport");
              })
              .catch(console.error);
          }}
        >
          Generate Report
        </a>
      </header>
    </div>
  );
}

export default App;

运行测试

运行 npm start 或 yarn start 命令可能会导致内存溢出以及等严重错误，为了避免这个问题，需要打开 package.json 文件，并替换 start 脚本中的代码如下：

react-scripts --max_old_space_size=8192 start

再次运行 npm start 或 yarn start 命令。如果出现以下错误，请删除 node_modules 文件夹后，再次运行 npm install 或 yarn 重新安装包，安装成功后，再次执行 npm start 或 yarn start 命令。

> react-scripts start

internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'react'

当应用启动后，点击"Generate Report" 链接后，会看到浏览器会自动下载PDF 文件。