ActiveReportsJS V2.2 新特性1-用代码运行时创建报表

如大家所知 ActiveReportsJS 的报表模板本质上是遵循既定规范的JSON 字符串，在V2.2 之前如果我们想在运行时修改报表模板或者生成报表文件，需要了解报表的JSON 结构且修改JSON 子串。如果修改某一些节点的属性值此方法是可行的，但对于动态构建表格或者矩表整个工作会非常复杂。
如大家的期望，ActiveReportsJS 毕竟是一个开发人员的工具，为了让我们开发人员用起来更自由自在，不打手，2.2 我们开放了报表结构的 TypeScript 声明，可以在Visual Studio Code 中根据智能提醒功能来用代码创建报表。

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

创建 React 应用

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

# npm 6.xnpm init react-app arjs-api --template typescript# npm 7+, extra double-dash is needednpm init react-app arjs-api -- --template typescript

或者使用 yarn 命令：

yarn create react-app arjs-api --template typescript
安装 ActivereportsJS npm 包

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

npm install @grapecity/activereports

或者使用 yarn 命令：

yarn add @grapecity/activereports实现报表服务

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

1. import { Rdl as ARJS, PageReport } from "@grapecity/activereports/core";
   
2. import { PdfExport } from "@grapecity/activereports";
   
3. 
   
4. export function buildReportDefinition(): ARJS.Report {
   
5.   const report: ARJS.Report = {};
   
6.   report.Width = "8.5in";
   
7.   report.Page = {
   
8.     TopMargin: "0.5in",
   
9.     BottomMargin: "0.5in",
   
10.     LeftMargin: "0.5in",
    
11.     RightMargin: "0.5in",
    
12.     PageWidth: "8.5in",
    
13.     PageHeight: "11in",
    
14.   };
    
15.   const textbox: ARJS.Textbox = { Type: "textbox", Name: "txtGreetings" };
    
16.   textbox.Value = "Hello, ActiveReportsJS";
    
17.   textbox.Style = {
    
18.     FontSize: "18pt",
    
19.   };
    
20.   textbox.Width = "7in";
    
21.   textbox.Height = "0.5in";
    
22.   report.Body = { ReportItems: [textbox] };
    
23.   return report;
    
24. }
    
25. 
    
26. export async function exportReport(
    
27.   reportDefinition: ARJS.Report
    
28. ): Promise<PdfExport.PdfExportResult> {
    
29.   const pageReport = new PageReport();
    
30.   await pageReport.load(reportDefinition);
    
31.   const doc = await pageReport.run();
    
32.   return PdfExport.exportDocument(doc, {
    
33.     info: {
    
34.       title: "Generated by ActiveReportsJS",
    
35.     },
    
36.   });
    
37. }

复制代码

使用报表服务

打开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 startinternal/modules/cjs/loader.js:883  throw err;  ^Error: Cannot find module 'react'

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