以模块方式加载

Angular，React及Vue都使用了 webpack 会将网页内容转换为浏览器可识别的指令。我们推荐引用 Report报表模板通过模块的方式 dependency graph 这样做的优点如下:

报表模板会被压缩到最小减少了额外的网络请求。
可以避免发生 未找到报表模板 错误。
请求结果文件名如果包括内容哈希值，不需要担心浏览器会缓存其旧版本。
TypeScript简化了编写在运行时修改报表模板的代码的经验，提升开发速度。

Webpack 加载器

Webpack 的加载器功能使得我们可使用导入命令，可直接从JavaScript 模块中 import 任何格式文件

ActiveReportsJS 使用 JSON 格式及 rdlx-json 扩展名保存报表模板文件。Webpack 包含了 json-loader 库，可以根据自定义的文件格式导入 JSON 文件。您可以通过执行 npm install -D json-loader 或 yarn add json-loader -D 命令为 Angular，React,或Vue 应用程序安装该包。

使用 TypeScript 加载报表

TypeScript 是 Web 应用开发的基础语言。Angular， React及 Vue 框架提供了TypeScript的模板文件。在WildCard Module Declaration 包含了很多功能，并允许提供自定义的模块，如 *.rdlx-json 文件为强类型。 ActiveReportsJS 报表模板结构在 RDLReportDefinition 接口中定义了。该API包含在@grapecity/activereports包中。您可以通过在 Angular，Vue或React项目的根文件夹下面调用 activereports.d.ts 文件：

declare module '*.rdlx-json' {
  import { RDLReportDefinition } from '@grapecity/activereports/core';
  const report: RDLReportDefinition;
  export default report;
}

您可以使用inline loaders 导入报表模板：

// eslint-disable-next-line import/no-webpack-loader-syntax
import report from '!json-loader!../reports/Products.rdlx-json';

报表模板模块的名称由加载器 json-loader名称，rdlx-json 文件的相关路径组成，并使用前缀隔开 !。

另外，您可添加自定义 WebPack 配置指定加载 *.rdlx-json 模块。该设置需要根据使用的框架安装其他的工具，我们就不在此赘述了。

IDE如 Visual Studio Code可以识别 Typescript 并提供智能提醒。您可以进行简单的修改。

您可以使用 viewer.open 方法加载导入的报表模板。示例如下：

Angular 组件

import { Component, ViewChild } from '@angular/core';
import { ViewerComponent } from '@grapecity/activereports-angular';

// eslint-disable-next-line import/no-webpack-loader-syntax
import report from '!json-loader!../reports/Products.rdlx-json';

@Component({
  selector: 'app-root',
  template: `<div id="viewer-host">
    <gc-activereports-viewer (init)="onViewerInit()"></gc-activereports-viewer>
  </div>`,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent;
  onViewerInit() {
    this.reportViewer.open(report);
  }
}

React 组件

import React from "react";
import { Viewer } from "@grapecity/activereports-react";

// eslint-disable-next-line import/no-webpack-loader-syntax
import report from "!json-loader!../reports/ProductsReport.rdlx-json";

const ViewerApp: React.FC = () => {
  const viewerRef = React.useRef<Viewer>(null);
  React.useEffect(() => {
    const viewerInstance = viewerRef.current?.Viewer;
    viewerInstance?.open(report);
  }, []);
  return (
    <div id="viewer-host">
      <Viewer ref={viewerRef} />
    </div>
  );
};

Vue 组件

<template>
  <div id="viewer-host">
    <JSViewer ref="reportViewer"></JSViewer>
  </div>
</template>

<script>
import { Viewer } from "@grapecity/activereports-vue";

// eslint-disable-next-line import/no-webpack-loader-syntax
import report from "!json-loader!../reports/ProductsReport.rdlx-json";

export default {
  name: "App",
  components: {
    JSViewer: Viewer
  },
  mounted() {
    const viewer = this.$refs.reportViewer.Viewer();
    viewer.open(report);
  }
};
</script>

不使用 TypeScript 加载报表

如果您不使用 TypeScript 加载报表的语法也是完全不同的：

import * as report from '!json-loader!../reports/ProductsReport.rdlx-json';

为 viewer.open如果您传递 报表 变量为 viewer.open method precisely as shown in the preceding section.