请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Lenka.Guo 讲师达人认证 悬赏达人认证
超级版主   /  发表于:2021-10-11 17:36  /   查看:47  /  回复:0
本帖最后由 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 ,输入以下代码:
  1. import { Rdl as ARJS, PageReport } from "@grapecity/activereports/core";
  2. import { PdfExport } from "@grapecity/activereports";

  3. export function buildReportDefinition(): ARJS.Report {
  4.   const report: ARJS.Report = {};
  5.   report.Width = "8.5in";
  6.   report.Page = {
  7.     TopMargin: "0.5in",
  8.     BottomMargin: "0.5in",
  9.     LeftMargin: "0.5in",
  10.     RightMargin: "0.5in",
  11.     PageWidth: "8.5in",
  12.     PageHeight: "11in",
  13.   };
  14.   const textbox: ARJS.Textbox = { Type: "textbox", Name: "txtGreetings" };
  15.   textbox.Value = "Hello, ActiveReportsJS";
  16.   textbox.Style = {
  17.     FontSize: "18pt",
  18.   };
  19.   textbox.Width = "7in";
  20.   textbox.Height = "0.5in";
  21.   report.Body = { ReportItems: [textbox] };
  22.   return report;
  23. }

  24. export async function exportReport(
  25.   reportDefinition: ARJS.Report
  26. ): Promise<PdfExport.PdfExportResult> {
  27.   const pageReport = new PageReport();
  28.   await pageReport.load(reportDefinition);
  29.   const doc = await pageReport.run();
  30.   return PdfExport.exportDocument(doc, {
  31.     info: {
  32.       title: "Generated by ActiveReportsJS",
  33.     },
  34.   });
  35. }
复制代码

使用报表服务
打开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 文件。


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

0 个回复

您需要登录后才可以回帖 登录 | 立即注册