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