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: };
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:883throw err;^Error: Cannot find module 'react'当应用启动后，点击"Generate Report" 链接后，会看到浏览器会自动下载PDF 文件。
页:
[1]