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

登录

本帖最后由 Lenka.Guo 于 2021-11-9 09:26 编辑

如大家所知 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 ，输入以下代码:

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",
},
});
}

复制代码

使用报表服务

打开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 文件。

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源

0 个回复

活字格认证

讲师达人

悬赏达人

微信认证勋章

元老葡萄